日期选择器 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

包含单个日期的选择模型。

A selection model that contains a single date.

属性
名称 描述

selection: S

The current selection.

selectionChanged: Observable<DateSelectionModelChange<S>>

当选择发生变化时会触发。

Emits when the selection has changed.
方法
add

在当前选择里添加一个日期。对于单个日期选择，添加的日期只会改写之前的选择。

Adds a date to the current selection. In the case of a single date selection, the added date simply overwrites the previous selection

参数

Parameters

date

D
clone

克隆选择模型。

Clones the selection model.
isComplete

检查当前选择是否已完成。在单选日期的情况下，如果当前选择不为 null，则为 true。

Checks whether the current selection is complete. In the case of a single date selection, this is true if the current selection is not null.
isValid

检查当前选择是否有效。

Checks whether the current selection is valid.

返回值

Returns
boolean
updateSelection

更新模型中的当前选择。

Updates the current selection in the model.

参数

Parameters

value

S

应该赋值的新选择。

New selection that should be assigned.

source

unknown

触发了选择更改的对象。

Object that triggered the selection change.

一个包含日期范围的选择模型。

A selection model that contains a date range.

属性
名称 描述

selection: S

The current selection.

selectionChanged: Observable<DateSelectionModelChange<S>>

当选择发生变化时会触发。

Emits when the selection has changed.
方法
add

在当前选择中添加一个日期。对于日期范围选择，添加的日期会填充该范围内的下一个 null 值。如果 start 和 end 都有日期，那就重置一下当前选择，以便把指定的日期作为新的 start，而其 end 是 null。

Adds a date to the current selection. In the case of a date range selection, the added date fills in the next null value in the range. If both the start and the end already have a date, the selection is reset so that the given date is the new start and the end is null.

参数

Parameters

date

D
clone

克隆选择模型。

Clones the selection model.
isComplete

检查当前选择是否已完成。对于日期范围选择，如果当前选择的 start 和 end 都是非 null，则为 true。

Checks whether the current selection is complete. In the case of a date range selection, this is true if the current selection has a non-null start and end.

返回值

Returns
boolean
isValid

检查当前选择是否有效。

Checks whether the current selection is valid.

返回值

Returns
boolean
updateSelection

更新模型中的当前选择。

Updates the current selection in the model.

参数

Parameters

value

S

应该赋值的新选择。

New selection that should be assigned.

source

unknown

触发了选择更改的对象。

Object that triggered the selection change.

用于把输入框连接到 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

@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

@Output()

dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>

@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>

stateChanges: Subject<void>

方法
getConnectedOverlayOrigin

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

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

返回值

Returns
ElementRef

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

The element to connect the popup to.
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

参数

Parameters

fn

() => void
validate

参数

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>

@Input()

color: ThemePalette

@Input()

dateClass: MatCalendarCellClassFunction<D>

@Input()

disabled: boolean

@Input()

opened: boolean

@Input()

panelClass: string | string[]

@Input()

restoreFocus: boolean

@Input()

startAt: D | null

@Input()

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

@Input()

touchUi: boolean

@Input()

xPosition: DatepickerDropdownPositionX

@Input()

yPosition: DatepickerDropdownPositionY

@Output('closed')

closedStream: EventEmitter<void>

@Output()

monthSelected: EventEmitter<D>

@Output('opened')

openedStream: EventEmitter<void>

@Output()

viewChanged: EventEmitter<MatCalendarView>

@Output()

yearSelected: EventEmitter<D>

datepickerInput: C

id: string

stateChanges: Subject<void>

方法
close
open
registerActions

参数

Parameters

portal

TemplatePortal<any>
registerInput

参数

Parameters

input

C

返回值

Returns
MatDateSelectionModel<S, D>
removeActions

参数

Parameters

portal

TemplatePortal<any>
select

参数

Parameters

date

D

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

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

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

disabled: boolean

@Input()

errorStateMatcher: ErrorStateMatcher

@Input()

value: D | null

@Output()

dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>

@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>

errorState: boolean

ngControl: NgControl

stateChanges: Subject<void>

方法
focus
getMirrorValue

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

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

返回值

Returns
string
isEmpty

返回值

Returns
boolean
registerOnValidatorChange

参数

Parameters

fn

() => void
updateErrorState
validate

参数

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

@Input()

errorStateMatcher: ErrorStateMatcher

@Input()

value: D | null

@Output()

dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>

@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>

errorState: boolean

ngControl: NgControl

stateChanges: Subject<void>

方法
focus
isEmpty

返回值

Returns
boolean
registerOnValidatorChange

参数

Parameters

fn

() => void
updateErrorState
validate

参数

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>

@Input()

color: ThemePalette

@Input()

dateClass: MatCalendarCellClassFunction<D>

@Input()

disabled: boolean

@Input()

opened: boolean

@Input()

panelClass: string | string[]

@Input()

restoreFocus: boolean

@Input()

startAt: D | null

@Input()

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

@Input()

touchUi: boolean

@Input()

xPosition: DatepickerDropdownPositionX

@Input()

yPosition: DatepickerDropdownPositionY

@Output('closed')

closedStream: EventEmitter<void>

@Output()

monthSelected: EventEmitter<D>

@Output('opened')

openedStream: EventEmitter<void>

@Output()

viewChanged: EventEmitter<MatCalendarView>

@Output()

yearSelected: EventEmitter<D>

datepickerInput: C

id: string

stateChanges: Subject<void>

方法
close
open
registerActions

参数

Parameters

portal

TemplatePortal<any>
registerInput

参数

Parameters

input

C

返回值

Returns
MatDateSelectionModel<S, D>
removeActions

参数

Parameters

portal

TemplatePortal<any>
select

参数

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
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.

包含选定日期的选择模型。

A selection model containing a date selection.

属性
名称 描述

selection: S

The current selection.

selectionChanged: Observable<DateSelectionModelChange<S>>

当选择发生变化时会触发。

Emits when the selection has changed.
方法
add

在当前选择里添加一个日期。

Adds a date to the current selection.

参数

Parameters

date

D
isComplete

检查当前选择是否已完成。

Checks whether the current selection is complete.

返回值

Returns
boolean
isValid

检查当前选择是否有效。

Checks whether the current selection is valid.

返回值

Returns
boolean
updateSelection

更新模型中的当前选择。

Updates the current selection in the model.

参数

Parameters

value

S

应该赋值的新选择。

New selection that should be assigned.

source

unknown

触发了选择更改的对象。

Object that triggered the selection change.
已弃用
clone

克隆选择模型。

Clones the selection model.

返回值

Returns
MatDateSelectionModel<S, D>

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

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.

参数

Parameters

activeDate

D

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

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

currentRange

DateRange<D>

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

Range that is currently shown in the calendar.

event

Event

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

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.

返回值

Returns
DateRange<D>
selectionFinished

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

Called when the user has finished selecting a value.

参数

Parameters

date

D

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

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

currentRange

DateRange<D>

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

Range that is currently show in the calendar.

event

Event

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

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

返回值

Returns
DateRange<D>

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

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

属性
名称 描述

event: Event

value: D

日期选择模型在选择模型改变时发出的事件。

Event emitted by the date selection model when its selection changes.

属性
名称 描述

selection: S

选择的新值。

New value for the selection.

source: unknown

触发变更的对象。

Object that triggered the change.

日期选择器下拉列表沿 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;

用于为组件提供单选模型。

Used to provide a single selection model to a component.

const MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider;

用于为组件提供范围选择模型。

Used to provide a range selection model to a component.

const MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER: FactoryProvider;

Angular Material datepicker-testing API 参考文档

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

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

方法
blur

返回值

Returns
Promise<void>
异步
closeCalendar

Closes the calendar associated with the input.

返回值

Returns
Promise<void>

Promise that resolves when the action completes.
focus

返回值

Returns
Promise<void>
异步
getCalendar

Gets the MatCalendarHarness that is associated with the trigger.

参数

Parameters

filter

CalendarHarnessFilters = {}

Optionally filters which calendar is included.

返回值

Returns
Promise<MatCalendarHarness>
getMax

返回值

Returns
Promise<string | null>
getMin

返回值

Returns
Promise<string | null>
getPlaceholder

返回值

Returns
Promise<string>
getValue

返回值

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

返回值

Returns
Promise<boolean>
isFocused

返回值

Returns
Promise<boolean>
isRequired

返回值

Returns
Promise<boolean>
异步
openCalendar

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

Opens the calendar associated with the input.

返回值

Returns
Promise<void>

Promise that resolves when the action completes.
setValue

参数

Parameters

newValue

string

返回值

Returns
Promise<void>

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

方法
closeCalendar

返回值

Returns
Promise<void>
getCalendar

参数

Parameters

filter

CalendarHarnessFilters = {}

返回值

Returns
Promise<MatCalendarHarness>
hasCalendar

返回值

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

返回值

Returns
Promise<void>

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

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

方法
blur

返回值

Returns
Promise<void>
focus

返回值

Returns
Promise<void>
getMax

返回值

Returns
Promise<string | null>
getMin

返回值

Returns
Promise<string | null>
getPlaceholder

返回值

Returns
Promise<string>
getValue

返回值

Returns
Promise<string>
异步
host

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

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

返回值

Returns
Promise<TestElement>
isDisabled

返回值

Returns
Promise<boolean>
isFocused

返回值

Returns
Promise<boolean>
isRequired

返回值

Returns
Promise<boolean>
setValue

参数

Parameters

newValue

string

返回值

Returns
Promise<void>

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

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

方法
blur

返回值

Returns
Promise<void>
focus

返回值

Returns
Promise<void>
getMax

返回值

Returns
Promise<string | null>
getMin

返回值

Returns
Promise<string | null>
getPlaceholder

返回值

Returns
Promise<string>
getValue

返回值

Returns
Promise<string>
异步
host

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

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

返回值

Returns
Promise<TestElement>
isDisabled

返回值

Returns
Promise<boolean>
isFocused

返回值

Returns
Promise<boolean>
isRequired

返回值

Returns
Promise<boolean>
setValue

参数

Parameters

newValue

string

返回值

Returns
Promise<void>

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

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

方法
closeCalendar

返回值

Returns
Promise<void>
getCalendar

参数

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

返回值

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

返回值

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.

参数

Parameters

filter

CalendarCellHarnessFilters = {}

Optionally filters which cells are included.

返回值

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.

参数

Parameters

filter

CalendarCellHarnessFilters = {}

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

返回值

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