日期选择器 Datepicker

datepicker 的 API

Angular Material datepicker API 参考文档

import {MatDatepickerModule} from '@angular/material/datepicker';

提供默认的日期范围选择行为。

Provides the default date range selection behavior.

方法
createPreview

参数

Parameters

activeDate

D

currentRange

DateRange<D>
selectionFinished

参数

Parameters

date

D

currentRange

DateRange<D>

需要国际化的日期选择器数据。

Datepicker data that requires internationalization.

属性
名称 描述

calendarLabel: string

日历弹出框的标签(由屏幕阅读器使用)。

A label for the calendar popup (used by screen readers).

changes: Subject<void>

只要这里的标签发生了变化就会发出流。如果标签在初始化后发生了变化,用它来通知组件。

Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization.

closeCalendarLabel: string

该按钮的标签用于关闭日历弹出窗口。

Label for the button used to close the calendar popup.

nextMonthLabel: string

下个月按钮的标签(由屏幕阅读器使用)。

A label for the next month button (used by screen readers).

nextMultiYearLabel: string

下一个多年按钮的标签(由屏幕阅读器使用)。

A label for the next multi-year button (used by screen readers).

nextYearLabel: string

下一年按钮的标签(由屏幕阅读器使用)。

A label for the next year button (used by screen readers).

openCalendarLabel: string

该按钮的标签,用于打开日历弹出框(由屏幕阅读器使用)。

A label for the button used to open the calendar popup (used by screen readers).

prevMonthLabel: string

上个月按钮的标签(由屏幕阅读器使用)。

A label for the previous month button (used by screen readers).

prevMultiYearLabel: string

前一个多年按钮的标签(由屏幕阅读器使用)。

A label for the previous multi-year button (used by screen readers).

prevYearLabel: string

上一年按钮的标签(由屏幕阅读器使用)。

A label for the previous year button (used by screen readers).

switchToMonthViewLabel: string

“切换到月份视图”按钮的标签(由屏幕阅读器使用)。

A label for the 'switch to month view' button (used by screen readers).

switchToMultiYearViewLabel: string

“切换到年份视图”按钮的标签(由屏幕阅读器使用)。

A label for the 'switch to year view' button (used by screen readers).

方法
formatYearRange

格式化年份范围。

Formats a range of years.

参数

Parameters

start

string

end

string

返回值

Returns

string

用于把输入框连接到 MatDatepicker 的指令。

Directive used to connect an input to a MatDatepicker.

选择器: input[matDatepicker]
导出为: matDatepickerInput
属性
名称 描述
@Input('matDatepickerFilter')

dateFilter: DateFilterFn<D>

可以用来过滤掉日期选择器中日期的函数。

Function that can be used to filter out dates within the datepicker.

@Input()

disabled: boolean

datepicker-input 是否已禁用了。

Whether the datepicker-input is disabled.

@Input()

matDatepicker: MatDatepickerPanel<MatDatepickerControl<D>, D, D>

与此输入框关联的日期选择器。

The datepicker that this input is associated with.

@Input()

max: D | null

最大有效日期。

The maximum valid date.

@Input()

min: D | null

最小有效日期。

The minimum valid date.

@Input()

value: D | null

输入框的值。

The value of the input.

@Output()

dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>

<input> 上触发 change 事件时发出通知。

Emits when a change event is fired on this <input>.

@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>

<input> 上触发 input 事件时发出通知。

Emits when an input event is fired on this <input>.

stateChanges: Subject<void>

当内部状态发生变化时触发

Emits when the internal state has changed

方法
getConnectedOverlayOrigin

获取日期选择器弹出框应该连接到的元素。

Gets the element that the datepicker popup should be connected to.

要把弹出框连接到的元素。

@return The element to connect the popup to.

返回值

Returns

ElementRef

要把弹出框连接到的元素。

The element to connect the popup to.

getOverlayLabelId

获取元素的 ID,该元素的 ID 用作日历浮层的描述。

Gets the ID of an element that should be used a description for the calendar overlay.

返回值

Returns

string | null
getStartValue

获取日历的起始日期。

Gets the value at which the calendar should start.

返回值

Returns

D | null
getThemePalette

返回输入框表单字段中使用的调色板(如果有)。

Returns the palette used by the input's form field, if any.

返回值

Returns

ThemePalette
registerOnValidatorChange

@docs-private

参数

Parameters

fn

() => void
validate

@docs-private

参数

Parameters

c

AbstractControl

返回值

Returns

ValidationErrors | null

负责管理日期范围选择器弹出/对话框的组件。

Component responsible for managing the date range picker popup/dialog.

选择器: mat-date-range-picker
导出为: matDateRangePicker
属性
名称 描述
@Input()

calendarHeaderComponent: ComponentType<any>

一个输入属性,用于指示日历的自定义标头组件的类型(如果已设置)。

An input indicating the type of the custom header component for the calendar, if set.

@Input()

color: ThemePalette

要在日期选择器的日历上使用的调色板。

Color palette to use on the datepicker's calendar.

@Input()

dateClass: MatCalendarCellClassFunction<D>

可以用来为日期添加自定义 CSS 类的函数。

Function that can be used to add custom CSS classes to dates.

@Input()

disabled: boolean

是否应该禁用日期选择器的弹出窗口。

Whether the datepicker pop-up should be disabled.

@Input()

opened: boolean

日历是否处于打开状态。

Whether the calendar is open.

@Input()

panelClass: string | string[]

要传递给日期选择器面板的类。支持字符串和字符串数组的值,类似于 ngClass

Classes to be passed to the date picker panel. Supports string and string array values, similar to ngClass.

@Input()

restoreFocus: boolean

当日历关闭时,是否要把焦点恢复到之前拥有焦点的元素。请注意,自动恢复焦点是一种无障碍功能,如果你决定将其关闭,建议你提供自己的等效对象。

Whether to restore focus to the previously-focused element when the calendar is closed. Note that automatic focus restoration is an accessibility feature and it is recommended that you provide your own equivalent, if you decide to turn it off.

@Input()

startAt: D | null

打开日历时的初始日期。

The date to open the calendar to initially.

@Input()

startView: 'month' | 'year' | 'multi-year'

日历应该启动到哪个视图。

The view that the calendar should start in.

@Input()

touchUi: boolean

日历 UI 是否处于触控模式。在触控模式下,日历会在一个对话框中打开,而不是下拉框,而且元素有更大的衬距,以允许更大的触控目标。

Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a dropdown and elements have more padding to allow for bigger touch targets.

@Input()

xPosition: DatepickerDropdownPositionX

日期选择器在 X 轴上的首选位置。

Preferred position of the datepicker in the X axis.

@Input()

yPosition: DatepickerDropdownPositionY

日期选择器在 Y 轴上的首选位置。

Preferred position of the datepicker in the Y axis.

@Output('closed')

closedStream: EventEmitter<void>

当日期选择器已关闭时触发。

Emits when the datepicker has been closed.

@Output()

monthSelected: EventEmitter<D>

在年份视图中选定月份时触发。这并不会更改选定日期。

Emits selected month in year view. This doesn't imply a change on the selected date.

@Output('opened')

openedStream: EventEmitter<void>

当日期选择器打开时发出通知。

Emits when the datepicker has been opened.

@Output()

viewChanged: EventEmitter<MatCalendarView>

当前视图发生变化时触发。

Emits when the current view changes.

@Output()

yearSelected: EventEmitter<D>

在多年视图中选出年份时触发。这并不会更改选定日期。

Emits selected year in multiyear view. This doesn't imply a change on the selected date.

datepickerInput: C

此日期选择器关联到的输入框元素。

The input element this datepicker is associated with.

id: string

日期选择器日历的 id。

The id for the datepicker calendar.

stateChanges: Subject<void>

当日期选择器的状态发生变化时触发。

Emits when the datepicker's state changes.

方法
close

关闭日历。

Close the calendar.

open

打开日历。

Open the calendar.

registerActions

使用日期选择器注册一个包含操作按钮的传送点。

Registers a portal containing action buttons with the datepicker.

要注册的传送点。

@param portal Portal to be registered.

参数

Parameters

portal

TemplatePortal<any>
registerInput

用这个日期选择器注册一个输入框。

Register an input with this datepicker.

要注册这个日期选择器的输入框。

@param input The datepicker input to register with this datepicker.

输入应该挂钩到的选择模型。

@returns Selection model that the input should hook itself up to.

参数

Parameters

input

C

返回值

Returns

MatDateSelectionModel<S, D>
removeActions

从日期选择器中删除一个包含动作按钮的传送点。

Removes a portal containing action buttons from the datepicker.

要删除的传送点。

@param portal Portal to be removed.

参数

Parameters

portal

TemplatePortal<any>
select

选择指定的日期

Selects the given date

参数

Parameters

date

D

用于在 mat-date-range-input 中输入起始日期的输入框。

Input for entering the start date in a mat-date-range-input.

选择器: input[matStartDate]
属性
名称 描述
@Input()

disabled: boolean

datepicker-input 是否已禁用了。

Whether the datepicker-input is disabled.

@Input()

errorStateMatcher: ErrorStateMatcher

@Input()

value: D | null

输入框的值。

The value of the input.

@Output()

dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>

<input> 上触发 change 事件时发出通知。

Emits when a change event is fired on this <input>.

@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>

<input> 上触发 input 事件时发出通知。

Emits when an input event is fired on this <input>.

errorState: boolean

ngControl: NgControl

@docs-private

stateChanges: Subject<void>

方法
focus

让输入框获得焦点。

Focuses the input.

getMirrorValue

获取镜像输入框大小时应该使用的值。

Gets the value that should be used when mirroring the input's size.

返回值

Returns

string
isEmpty

获取输入框的结果是否为空。

Gets whether the input is empty.

返回值

Returns

boolean
registerOnValidatorChange

@docs-private

参数

Parameters

fn

() => void
updateErrorState
validate

@docs-private

参数

Parameters

c

AbstractControl

返回值

Returns

ValidationErrors | null

用于在 mat-date-range-input 中输入结束日期的输入框。

Input for entering the end date in a mat-date-range-input.

选择器: input[matEndDate]
属性
名称 描述
@Input()

disabled: boolean

datepicker-input 是否已禁用了。

Whether the datepicker-input is disabled.

@Input()

errorStateMatcher: ErrorStateMatcher

@Input()

value: D | null

输入框的值。

The value of the input.

@Output()

dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>

<input> 上触发 change 事件时发出通知。

Emits when a change event is fired on this <input>.

@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>

<input> 上触发 input 事件时发出通知。

Emits when an input event is fired on this <input>.

errorState: boolean

ngControl: NgControl

@docs-private

stateChanges: Subject<void>

方法
focus

让输入框获得焦点。

Focuses the input.

isEmpty

获取输入框的结果是否为空。

Gets whether the input is empty.

返回值

Returns

boolean
registerOnValidatorChange

@docs-private

参数

Parameters

fn

() => void
updateErrorState
validate

@docs-private

参数

Parameters

c

AbstractControl

返回值

Returns

ValidationErrors | null

MatCalendar 的默认标头

Default header for MatCalendar

选择器: mat-calendar-header
导出为: matCalendarHeader
属性
名称 描述

calendar: MatCalendar<D>

nextButtonLabel: string

下一个按钮的标签。

The label for the next button.

periodButtonLabel: string

periodButtonText: string

当前日历视图的标签。

The label for the current calendar view.

prevButtonLabel: string

前一个按钮的标签。

The label for the previous button.

方法
currentPeriodClicked

处理用户点击“时间段标签”的操作。

Handles user clicks on the period label.

nextClicked

处理用户点击“下月”按钮的操作。

Handles user clicks on the next button.

nextEnabled

是否启用“下个时间段”按钮。

Whether the next period button is enabled.

返回值

Returns

boolean
previousClicked

处理用户点击“上月”按钮的操作。

Handles user clicks on the previous button.

previousEnabled

是否启用“上个时间段”按钮。

Whether the previous period button is enabled.

返回值

Returns

boolean

负责管理日期选择器弹出/对话框的组件。

Component responsible for managing the datepicker popup/dialog.

选择器: mat-datepicker
导出为: matDatepicker
属性
名称 描述
@Input()

calendarHeaderComponent: ComponentType<any>

一个输入属性,用于指示日历的自定义标头组件的类型(如果已设置)。

An input indicating the type of the custom header component for the calendar, if set.

@Input()

color: ThemePalette

要在日期选择器的日历上使用的调色板。

Color palette to use on the datepicker's calendar.

@Input()

dateClass: MatCalendarCellClassFunction<D>

可以用来为日期添加自定义 CSS 类的函数。

Function that can be used to add custom CSS classes to dates.

@Input()

disabled: boolean

是否应该禁用日期选择器的弹出窗口。

Whether the datepicker pop-up should be disabled.

@Input()

opened: boolean

日历是否处于打开状态。

Whether the calendar is open.

@Input()

panelClass: string | string[]

要传递给日期选择器面板的类。支持字符串和字符串数组的值,类似于 ngClass

Classes to be passed to the date picker panel. Supports string and string array values, similar to ngClass.

@Input()

restoreFocus: boolean

当日历关闭时,是否要把焦点恢复到之前拥有焦点的元素。请注意,自动恢复焦点是一种无障碍功能,如果你决定将其关闭,建议你提供自己的等效对象。

Whether to restore focus to the previously-focused element when the calendar is closed. Note that automatic focus restoration is an accessibility feature and it is recommended that you provide your own equivalent, if you decide to turn it off.

@Input()

startAt: D | null

打开日历时的初始日期。

The date to open the calendar to initially.

@Input()

startView: 'month' | 'year' | 'multi-year'

日历应该启动到哪个视图。

The view that the calendar should start in.

@Input()

touchUi: boolean

日历 UI 是否处于触控模式。在触控模式下,日历会在一个对话框中打开,而不是下拉框,而且元素有更大的衬距,以允许更大的触控目标。

Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a dropdown and elements have more padding to allow for bigger touch targets.

@Input()

xPosition: DatepickerDropdownPositionX

日期选择器在 X 轴上的首选位置。

Preferred position of the datepicker in the X axis.

@Input()

yPosition: DatepickerDropdownPositionY

日期选择器在 Y 轴上的首选位置。

Preferred position of the datepicker in the Y axis.

@Output('closed')

closedStream: EventEmitter<void>

当日期选择器已关闭时触发。

Emits when the datepicker has been closed.

@Output()

monthSelected: EventEmitter<D>

在年份视图中选定月份时触发。这并不会更改选定日期。

Emits selected month in year view. This doesn't imply a change on the selected date.

@Output('opened')

openedStream: EventEmitter<void>

当日期选择器打开时发出通知。

Emits when the datepicker has been opened.

@Output()

viewChanged: EventEmitter<MatCalendarView>

当前视图发生变化时触发。

Emits when the current view changes.

@Output()

yearSelected: EventEmitter<D>

在多年视图中选出年份时触发。这并不会更改选定日期。

Emits selected year in multiyear view. This doesn't imply a change on the selected date.

datepickerInput: C

此日期选择器关联到的输入框元素。

The input element this datepicker is associated with.

id: string

日期选择器日历的 id。

The id for the datepicker calendar.

stateChanges: Subject<void>

当日期选择器的状态发生变化时触发。

Emits when the datepicker's state changes.

方法
close

关闭日历。

Close the calendar.

open

打开日历。

Open the calendar.

registerActions

使用日期选择器注册一个包含操作按钮的传送点。

Registers a portal containing action buttons with the datepicker.

要注册的传送点。

@param portal Portal to be registered.

参数

Parameters

portal

TemplatePortal<any>
registerInput

用这个日期选择器注册一个输入框。

Register an input with this datepicker.

要注册这个日期选择器的输入框。

@param input The datepicker input to register with this datepicker.

输入应该挂钩到的选择模型。

@returns Selection model that the input should hook itself up to.

参数

Parameters

input

C

返回值

Returns

MatDateSelectionModel<S, D>
removeActions

从日期选择器中删除一个包含动作按钮的传送点。

Removes a portal containing action buttons from the datepicker.

要删除的传送点。

@param portal Portal to be removed.

参数

Parameters

portal

TemplatePortal<any>
select

选择指定的日期

Selects the given date

参数

Parameters

date

D

可以用来改写 matDatepickerToggle 的图标。

Can be used to override the icon of a matDatepickerToggle.

选择器: [matDatepickerToggleIcon]
选择器: mat-datepicker-toggle
导出为: matDatepickerToggle
属性
名称 描述
@Input('aria-label')

ariaLabel: string

该按钮的屏幕阅读器标签。

Screenreader label for the button.

@Input('for')

datepicker: MatDatepickerPanel<MatDatepickerControl<any>, D>

该按钮将切换到的日期选择器实例。

Datepicker instance that the button will toggle.

@Input()

disableRipple: boolean

是否要禁用本开关上的涟漪。

Whether ripples on the toggle should be disabled.

@Input()

disabled: boolean

按钮开关是否已禁用。

Whether the toggle button is disabled.

选择器: mat-date-range-input
导出为: matDateRangeInput
属性
名称 描述
@Input()

comparisonEnd: D | null

应该在日历中显示的比较范围的结束日期。

End of the comparison range that should be shown in the calendar.

@Input()

comparisonStart: D | null

应该在日历中显示的比较范围的起始日期。

Start of the comparison range that should be shown in the calendar.

@Input()

dateFilter: DateFilterFn<D>

可用于过滤掉日期范围选择器中日期的函数。

Function that can be used to filter out dates within the date range picker.

@Input()

disabled: boolean

输入框是否已禁用。

Whether the input is disabled.

@Input()

max: D | null

最大有效日期。

The maximum valid date.

@Input()

min: D | null

最小有效日期。

The minimum valid date.

@Input()

rangePicker: MatDatepickerPanel<MatDatepickerControl<D>, DateRange<D>, D>

此输入框所关联的范围选择器。

The range picker that this input is associated with.

@Input()

required: boolean

输入框是否为必填项。

Whether the input is required.

@Input()

separator: '–'

要在输入框之间显示的分隔符文本。

Separator text to be shown between the inputs.

controlType: 'mat-date-range-input'

表单控件的名字。

Name of the form control.

empty: boolean

日期选择器输入框是否为空。

Whether the datepicker input is empty.

errorState: boolean

输入框是否处于出错状态。

Whether the input is in an error state.

focused: false

控件是否拥有焦点。

Whether the control is focused.

id: `mat-date-range-input-${nextUniqueId++}`

输入框的唯一 ID。

Unique ID for the input.

shouldLabelFloat: boolean

控件的标签是否应该浮动。

Whether the control's label should float.

stateChanges: Subject<void>

当输入框状态发生变化时触发。

Emits when the input's state has changed.

value:

范围输入框的当前值。

Current value of the range input.

方法
getConnectedOverlayOrigin

获取要附加日历浮层的元素。

Gets the element to which the calendar overlay should be attached.

返回值

Returns

ElementRef
getOverlayLabelId

获取元素的 ID,该元素的 ID 用作日历浮层的描述。

Gets the ID of an element that should be used a description for the calendar overlay.

返回值

Returns

string | null
getStartValue

获取日历的起始日期。

Gets the date at which the calendar should start.

返回值

Returns

D | null
getThemePalette

获取输入框的主题调色板。

Gets the input's theme palette.

返回值

Returns

ThemePalette

该按钮用于关闭 datepicker,并将当前选择内容赋值给数据模型。

Button that will close the datepicker and assign the current selection to the data model.

选择器: [matDatepickerApply] [matDateRangePickerApply]

该按钮用于关闭日期选择器并丢弃当前的选择。

Button that will close the datepicker and discard the current selection.

选择器: [matDatepickerCancel] [matDateRangePickerCancel]

可以用来把一行动作按钮投影到日期选择器或日期范围选择器底部的容器。

Container that can be used to project a row of action buttons to the bottom of a datepicker or date range picker.

选择器: mat-datepicker-actions mat-date-range-picker-actions

用于日期选择器的输入框和变更事件。我们并不总是能访问原生的 input 或者 change 事件,因为用户点击日历弹出窗口时可能会触发该事件。为了保持一致性,我们总是要改用 MatDatepickerInputEvent。

An event used for datepicker input and change events. We don't always have access to a native input or change event because the event may have been triggered by the user clicking on the calendar popup. For consistency, we always use MatDatepickerInputEvent instead.

属性
名称 描述

target: MatDatepickerInputBase<S, D>

到发出此事件的日期选择器输入框控件的引用。

Reference to the datepicker input component that emmited the event.

targetElement: HTMLElement

Reference to the native input element associated with the datepicker input.

value: D | null

目标日期选择器输入框控件的新值。

The new value for the target datepicker input.

表示日期范围的类。

A class representing a range of dates.

属性
名称 描述

end: D | null

此范围的截止日期。

The end date of the range.

start: D | null

此范围的起始日期。

The start date of the range.

可以提供的对象是为了自定义日期范围的选择行为。

Object that can be provided in order to customize the date range selection behavior.

方法
createPreview

当用户激活一个新日期时(例如,通过将鼠标悬停在此区域或移动焦点上)以及当日历尝试显示一个日期范围时,就会调用它。

Called when the user has activated a new date (e.g. by hovering over it or moving focus) and the calendar tries to display a date range.

用户已激活的日期。如果用户把焦点移到了一个不是日历单元格的元素上,它就是 null。

@param activeDate Date that the user has activated. Will be null if the user moved focus to an element that's no a calendar cell.

当前在日历里显示的范围。

@param currentRange Range that is currently shown in the calendar.

导致预览发生变化的 DOM 事件。可能是 mouseenter/mouseleavefocus/blur,具体取决于用户的导航方式。

@param event DOM event that caused the preview to be changed. Will be either a mouseenter/mouseleave or focus/blur depending on how the user is navigating.

参数

Parameters

activeDate

D

currentRange

DateRange<D>

event

Event

返回值

Returns

DateRange<D>
selectionFinished

当用户选择完一个值时调用。

Called when the user has finished selecting a value.

被选定的日期。如果用户清除了该选项,则该值为 null。

@param date Date that was selected. Will be null if the user cleared the selection.

当前显示在日历表中的范围。

@param currentRange Range that is currently show in the calendar.

触发了此次选择的 DOM 事件。目前,它只对应一个 click 事件,但以后可能会进一步扩展。

@param event DOM event that triggered the selection. Currently only corresponds to a click event, but it may get expanded in the future.

参数

Parameters

date

D

currentRange

DateRange<D>

event

Event

返回值

Returns

DateRange<D>

当用户操作后发出日历中日期的事件。

Event emitted when a date inside the calendar is triggered as a result of a user action.

属性
名称 描述

event: Event

value: D

日期选择器下拉列表沿 X 轴的可能位置。

Possible positions for the datepicker dropdown along the X axis.

type DatepickerDropdownPositionX = 'start' | 'end';

日期选择器下拉列表沿 Y 轴的可能位置。

Possible positions for the datepicker dropdown along the Y axis.

type DatepickerDropdownPositionY = 'above' | 'below';

可以用来过滤日历中日期的函数。

Function that can be used to filter out dates from a calendar.

type DateFilterFn = (date: D | null) => boolean;

可以与日历单元格关联的额外 CSS 类。

Extra CSS classes that can be associated with a calendar cell.

type MatCalendarCellCssClasses = string | string[] | Set<string> | {
    [key: string]: any;
};

一个函数,可以生成要添加到日历单元格中的额外类。

Function that can generate the extra classes that should be added to a calendar cell.

type MatCalendarCellClassFunction = (date: D, view: 'month' | 'year' | 'multi-year') => MatCalendarCellCssClasses;

用于自定义选择日期范围的行为的注入令牌。

Injection token used to customize the date range selection behavior.

const MAT_DATE_RANGE_SELECTION_STRATEGY: InjectionToken<MatDateRangeSelectionStrategy<any>>;

此注入令牌决定了当日历打开时滚动的处理策略。

Injection token that determines the scroll handling while the calendar is open.

const MAT_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
const yearsPerPage: 24;
const yearsPerRow: 4;

Angular Material datepicker-testing API 参考文档

import {MatDatepickerInputHarness} from '@angular/material/datepicker/testing';

与测试中的标准 Material datepicker 输入框进行交互的测试工具。

Harness for interacting with a standard Material datepicker inputs in tests.

方法
blur

让此输入框失焦并返回一个 Promise,指示操作何时完成。

Blurs the input and returns a promise that indicates when the action is complete.

返回值

Returns

Promise<void>
异步
closeCalendar

关闭与输入关联框的日历。

Closes the calendar associated with the input.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

focus

让此输入框获得焦点并返回一个 Promise,指示操作何时完成。

Focuses the input and returns a promise that indicates when the action is complete.

返回值

Returns

Promise<void>
异步
getCalendar

获取与触发器关联的 MatCalendarHarness

Gets the MatCalendarHarness that is associated with the trigger.

(可选)决定要包含哪个日历的过滤器。

@param filter Optionally filters which calendar is included.

参数

Parameters

filter

CalendarHarnessFilters = {}

返回值

Returns

Promise<MatCalendarHarness>
getMax

获取输入值的格式化过的最大日期。

Gets the formatted maximum date for the input's value.

返回值

Returns

Promise<string | null>
getMin

获取输入值的格式化过的最小日期。

Gets the formatted minimum date for the input's value.

返回值

Returns

Promise<string | null>
getPlaceholder

获取输入框的占位符。

Gets the placeholder of the input.

返回值

Returns

Promise<string>
getValue

获取输入框的值。

Gets the value of the input.

返回值

Returns

Promise<string>
异步
hasCalendar

日历是否与输入框关联。

Whether a calendar is associated with the input.

返回值

Returns

Promise<boolean>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
isCalendarOpen

获取与输入框关联的日历是否已打开。

Gets whether the calendar associated with the input is open.

返回值

Returns

Promise<boolean>
isDisabled

输入框是否已禁用。

Whether the input is disabled.

返回值

Returns

Promise<boolean>
isFocused

输入框是否拥有焦点。

Whether the input is focused.

返回值

Returns

Promise<boolean>
isRequired

输入框是否为必需的。

Whether the input is required.

返回值

Returns

Promise<boolean>
异步
openCalendar

打开与该输入框关联的日历。

Opens the calendar associated with the input.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

setValue

设置输入框的值。该值将通过模拟与给定值相对应的按键来设置。

Sets the value of the input. The value will be set by simulating keypresses that correspond to the given value.

参数

Parameters

newValue

string

返回值

Returns

Promise<void>

与测试中的标准 Material 日期选择器的切换器进行交互的测试工具。

Harness for interacting with a standard Material datepicker toggle in tests.

方法
closeCalendar

如果日历已打开,则将其关闭。

Closes the calendar if it is open.

返回值

Returns

Promise<void>
getCalendar

获取与触发器关联的 MatCalendarHarness

Gets the MatCalendarHarness that is associated with the trigger.

(可选)用于筛选包含的日历的可选过滤器。

@param filter Optionally filters which calendar is included.

参数

Parameters

filter

CalendarHarnessFilters = {}

返回值

Returns

Promise<MatCalendarHarness>
hasCalendar

获取是否有与触发器关联的日历。

Gets whether there is a calendar associated with the trigger.

返回值

Returns

Promise<boolean>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
isCalendarOpen

获取与此切换器关联的日历是否处于打开状态。

Gets whether the calendar associated with the toggle is open.

返回值

Returns

Promise<boolean>
异步
isDisabled

是否禁用此切换器。

Whether the toggle is disabled.

返回值

Returns

Promise<boolean>
openCalendar

如果启用了触发器并且有关联日历,则打开日历。

Opens the calendar if the trigger is enabled and it has a calendar.

返回值

Returns

Promise<void>

在测试中与标准 Material 日期范围选择器中的起始日期进行交互的测试工具。

Harness for interacting with a standard Material date range start input in tests.

方法
blur

让此输入框失焦并返回一个 Promise,指示操作何时完成。

Blurs the input and returns a promise that indicates when the action is complete.

返回值

Returns

Promise<void>
focus

让此输入框获得焦点并返回一个 Promise,指示操作何时完成。

Focuses the input and returns a promise that indicates when the action is complete.

返回值

Returns

Promise<void>
getMax

获取输入值的格式化过的最大日期。

Gets the formatted maximum date for the input's value.

返回值

Returns

Promise<string | null>
getMin

获取输入值的格式化过的最小日期。

Gets the formatted minimum date for the input's value.

返回值

Returns

Promise<string | null>
getPlaceholder

获取输入框的占位符。

Gets the placeholder of the input.

返回值

Returns

Promise<string>
getValue

获取输入框的值。

Gets the value of the input.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
isDisabled

输入框是否已禁用。

Whether the input is disabled.

返回值

Returns

Promise<boolean>
isFocused

输入框是否拥有焦点。

Whether the input is focused.

返回值

Returns

Promise<boolean>
isRequired

输入框是否为必需的。

Whether the input is required.

返回值

Returns

Promise<boolean>
setValue

设置输入框的值。该值将通过模拟与给定值相对应的按键来设置。

Sets the value of the input. The value will be set by simulating keypresses that correspond to the given value.

参数

Parameters

newValue

string

返回值

Returns

Promise<void>

在测试中与标准 Material 日期范围选择器中的结束日期进行交互的测试工具。

Harness for interacting with a standard Material date range end input in tests.

方法
blur

让此输入框失焦并返回一个 Promise,指示操作何时完成。

Blurs the input and returns a promise that indicates when the action is complete.

返回值

Returns

Promise<void>
focus

让此输入框获得焦点并返回一个 Promise,指示操作何时完成。

Focuses the input and returns a promise that indicates when the action is complete.

返回值

Returns

Promise<void>
getMax

获取输入值的格式化过的最大日期。

Gets the formatted maximum date for the input's value.

返回值

Returns

Promise<string | null>
getMin

获取输入值的格式化过的最小日期。

Gets the formatted minimum date for the input's value.

返回值

Returns

Promise<string | null>
getPlaceholder

获取输入框的占位符。

Gets the placeholder of the input.

返回值

Returns

Promise<string>
getValue

获取输入框的值。

Gets the value of the input.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
isDisabled

输入框是否已禁用。

Whether the input is disabled.

返回值

Returns

Promise<boolean>
isFocused

输入框是否拥有焦点。

Whether the input is focused.

返回值

Returns

Promise<boolean>
isRequired

输入框是否为必需的。

Whether the input is required.

返回值

Returns

Promise<boolean>
setValue

设置输入框的值。该值将通过模拟与给定值相对应的按键来设置。

Sets the value of the input. The value will be set by simulating keypresses that correspond to the given value.

参数

Parameters

newValue

string

返回值

Returns

Promise<void>

在测试中与标准 Material 日期范围选择器进行交互的测试工具。

Harness for interacting with a standard Material date range input in tests.

方法
closeCalendar

如果日历已打开,则将其关闭。

Closes the calendar if it is open.

返回值

Returns

Promise<void>
getCalendar

获取与触发器关联的 MatCalendarHarness

Gets the MatCalendarHarness that is associated with the trigger.

(可选)用于筛选包含的日历的可选过滤器。

@param filter Optionally filters which calendar is included.

参数

Parameters

filter

CalendarHarnessFilters = {}

返回值

Returns

Promise<MatCalendarHarness>
异步
getEndInput

获取范围输入框内部的结束日期输入框。

Gets the inner start date input inside the range input.

返回值

Returns

Promise<MatEndDateHarness>
异步
getSeparator

获取两个输入框值之间的分隔符文本。

Gets the separator text between the values of the two inputs.

返回值

Returns

Promise<string>
异步
getStartInput

获取范围输入框内部的起始日期输入框。

Gets the inner start date input inside the range input.

返回值

Returns

Promise<MatStartDateHarness>
异步
getValue

获取起始和结束输入框的组合值,包括分隔符。

Gets the combined value of the start and end inputs, including the separator.

返回值

Returns

Promise<string>
hasCalendar

获取是否有与触发器关联的日历。

Gets whether there is a calendar associated with the trigger.

返回值

Returns

Promise<boolean>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
isCalendarOpen

打开与该输入框关联的日历。

Opens the calendar associated with the input.

返回值

Returns

Promise<boolean>
异步
isDisabled

获取范围输入框是否已禁用。

Gets whether the range input is disabled.

返回值

Returns

Promise<boolean>
异步
isRequired

获取范围输入框是否必填。

Gets whether the range input is required.

返回值

Returns

Promise<boolean>
openCalendar

如果启用了触发器并且有关联日历,则打开日历。

Opens the calendar if the trigger is enabled and it has a calendar.

返回值

Returns

Promise<void>

在测试中与标准 Material calendar 进行交互的测试工具。

Harness for interacting with a standard Material calendar in tests.

方法
异步
changeView

通过单击视图切换按钮来更改日历视图。

Changes the calendar view by clicking on the view toggle button.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
getCells

获取日历中的单元格列表。

Gets a list of cells inside the calendar.

(可选)过滤要包含哪些单元格。

@param filter Optionally filters which cells are included.

参数

Parameters

filter

CalendarCellHarnessFilters = {}

返回值

Returns

Promise<MatCalendarCellHarness[]>
异步
getCurrentView

获取在日历内部显示的当前视图。

Gets the current view that is being shown inside the calendar.

返回值

Returns

Promise<CalendarView>
异步
getCurrentViewLabel

获取当前日历视图的标签。

Gets the label of the current calendar view.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
next

转到当前视图的下一页(例如,在月份视图中的下个月)。

Goes to the next page of the current view (e.g. next month when inside the month view).

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
previous

转到当前视图的上一页(例如,在月份视图中时的前一个月)。

Goes to the previous page of the current view (e.g. previous month when inside the month view).

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
selectCell

在当前日历视图中选择一个单元格。

Selects a cell in the current calendar view.

应用于单元格的可选过滤器。将选择与此过滤器匹配的第一个单元格。

@param filter An optional filter to apply to the cells. The first cell matching the filter will be selected.

参数

Parameters

filter

CalendarCellHarnessFilters = {}

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

与测试中的标准 Material 日历单元进行交互的测试工具。

Harness for interacting with a standard Material calendar cell in tests.

方法
异步
blur

让此日历单元格失焦。

Removes focus from the calendar cell.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
focus

让此日历单元格获得焦点。

Focuses the calendar cell.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
getAriaLabel

获取此日历单元格的 aria-label。

Gets the aria-label of the calendar cell.

返回值

Returns

Promise<string>
异步
getText

获取此日历单元格的文本。

Gets the text of the calendar cell.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
hover

将鼠标悬停在日历单元格上。

Hovers over the calendar cell.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
isActive

当前是否通过键盘导航激活了此单元格。

Whether the cell is currently activated using keyboard navigation.

返回值

Returns

Promise<boolean>
异步
isComparisonRangeEnd

此单元格是否比较范围的终点。

Whether the cell is the end of the comparison range.

返回值

Returns

Promise<boolean>
异步
isComparisonRangeStart

此单元格是否比较范围的起点。

Whether the cell is the start of the comparison range.

返回值

Returns

Promise<boolean>
异步
isDisabled

此单元格是否已禁用。

Whether the cell is disabled.

返回值

Returns

Promise<boolean>
异步
isInComparisonRange

此单元格是否在比较范围内。

Whether the cell is inside of the comparison range.

返回值

Returns

Promise<boolean>
异步
isInPreviewRange

此单元格是否在预览范围内。

Whether the cell is inside of the preview range.

返回值

Returns

Promise<boolean>
异步
isInRange

此单元格是否主范围的一部分。

Whether the cell is part of the main range.

返回值

Returns

Promise<boolean>
异步
isPreviewRangeEnd

此单元格是否在预览范围的终点。

Whether the cell is the end of the preview range.

返回值

Returns

Promise<boolean>
异步
isPreviewRangeStart

此单元格是否是预览范围的起点。

Whether the cell is the start of the preview range.

返回值

Returns

Promise<boolean>
异步
isRangeEnd

此单元格是否主范围的终点。

Whether the cell is the end of the main range.

返回值

Returns

Promise<boolean>
异步
isRangeStart

此单元格是否主范围的起点。

Whether the cell is the start of the main range.

返回值

Returns

Promise<boolean>
异步
isSelected

是否选中了此单元格。

Whether the cell is selected.

返回值

Returns

Promise<boolean>
异步
isToday

此单元格是否代表今天的日期。

Whether the cell represents today's date.

返回值

Returns

Promise<boolean>
异步
mouseAway

将鼠标从此日历单元格移开。

Moves the mouse away from the calendar cell.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

异步
select

选择此日历单元格。如果该单元格被禁用,则不会执行任何操作。

Selects the calendar cell. Won't do anything if the cell is disabled.

返回值

Returns

Promise<void>

当此动作完成时解析的 Promise。

一组可用于过滤日期选择器输入实例列表的条件。

A set of criteria that can be used to filter a list of datepicker input instances.

属性
名称 描述

placeholder: string | RegExp

根据输入的占位符文本进行过滤。

Filters based on the placeholder text of the input.

value: string | RegExp

根据输入值过滤。

Filters based on the value of the input.

一组可用于过滤日期选择器切换器实例列表的条件。

A set of criteria that can be used to filter a list of datepicker toggle instances.

一组可用于过滤日历实例列表的条件。

A set of criteria that can be used to filter a list of calendar instances.

一组可用于过滤日历单元格实例列表的条件。

A set of criteria that can be used to filter a list of calendar cell instances.

属性
名称 描述

active: boolean

根据是否是使用键盘导航激活的单元格进行过滤

Filters based on whether the cell is activated using keyboard navigation

disabled: boolean

根据是否禁用了该单元进行过滤。

Filters based on whether the cell is disabled.

inComparisonRange: boolean

根据单元格是否在比较范围内进行过滤。

Filters based on whether the cell is inside of the comparison range.

inPreviewRange: boolean

根据单元格是否在预览范围内进行过滤。

Filters based on whether the cell is inside of the preview range.

inRange: boolean

根据单元格是否在主范围内进行过滤。

Filters based on whether the cell is inside of the main range.

selected: boolean

根据是否选择了单元格进行过滤。

Filters based on whether the cell is selected.

text: string | RegExp

根据单元格的文本进行过滤。

Filters based on the text of the cell.

today: boolean

根据单元格是否代表今天的日期进行过滤。

Filters based on whether the cell represents today's date.

一组标准,可用于过滤日期范围输入实例的列表。

A set of criteria that can be used to filter a list of date range input instances.

属性
名称 描述

value: string | RegExp

根据输入值过滤。

Filters based on the value of the input.