日期选择器 Datepicker

自动完成 Autocomplete
徽章 Badge
底部操作表 Bottom Sheet
按钮 Button
开关按钮 Button toggle
卡片 Card
检查框 Checkbox
纸片 Chips
日期选择器 Datepicker
对话框 Dialog
分割器 Divider
可展开面板 Expansion Panel
表单字段 Form field
网格列表 Grid list
图标 Icon
输入框 Input
列表 List
菜单 Menu
分页器 Paginator
进度条 Progress bar
进度圈 Progress spinner
单选按钮 Radio button
涟漪 Ripples
选择框 Select
侧边栏 Sidenav
滑块开关 Slide toggle
滑杆 Slider
快餐栏 Snackbar
排序头 Sort header
步进器 Stepper
表格 Table
选项卡 Tabs
工具栏 Toolbar
工具提示 Tooltip
树 Tree
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

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

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 emitted 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/mouseleave 或 focus/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';

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

方法
blur

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 that resolves when the action completes.
focus

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

返回值

Returns
Promise<void>
异步
getCalendar

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

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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 that resolves when the action completes.
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>

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

方法
closeCalendar

Closes the calendar if it is open.

返回值

Returns
Promise<void>
getCalendar

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

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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

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

返回值

Returns
Promise<void>
focus

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

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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

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

返回值

Returns
Promise<void>
focus

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

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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

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

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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 that resolves when the action completes.
异步
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

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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 that resolves when the action completes.
异步
previous

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

返回值

Returns
Promise<void>

Promise that resolves when the action completes.
异步
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 that resolves when the action completes.

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

方法
异步
blur

Removes focus from the calendar cell.

返回值

Returns
Promise<void>

Promise that resolves when the action completes.
异步
focus

Focuses the calendar cell.

返回值

Returns
Promise<void>

Promise that resolves when the action completes.
异步
getAriaLabel

Gets the aria-label of the calendar cell.

返回值

Returns
Promise<string>
异步
getText

Gets the text of the calendar cell.

返回值

Returns
Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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 that resolves when the action completes.
异步
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 that resolves when the action completes.
异步
select

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

返回值

Returns
Promise<void>

Promise that resolves when the action completes.

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.
日期选择器 API 目录
Testing