API for datepicker

API reference for Angular Material datepicker

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

Provides the default date range selection behavior.

Methods
createDrag
Parameters

dragOrigin

D

originalRange

DateRange<D>

newDate

D

createPreview
Parameters

activeDate

D

currentRange

DateRange<D>

selectionFinished
Parameters

date

D

currentRange

DateRange<D>

Datepicker data that requires internationalization.

Properties
Name Description

calendarLabel: 'Calendar'

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: 'Close calendar'

Label for the button used to close the calendar popup.

comparisonDateLabel: 'Comparison range'

A label for the Comparison date of a range of dates (used by screen readers).

nextMonthLabel: 'Next month'

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

nextMultiYearLabel: 'Next 24 years'

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

nextYearLabel: 'Next year'

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

openCalendarLabel: 'Open calendar'

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

prevMonthLabel: 'Previous month'

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

prevMultiYearLabel: 'Previous 24 years'

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

prevYearLabel: 'Previous year'

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

switchToMonthViewLabel: 'Choose date'

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

switchToMultiYearViewLabel: 'Choose month and year'

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

Deprecated

endDateLabel: 'End date'

A label for the last date of a range of dates (used by screen readers).

Deprecated

startDateLabel: 'Start date'

A label for the first date of a range of dates (used by screen readers).

Methods
formatYearRange

Formats a range of years (used for visuals).

Parameters

start

string

end

string

Returns
string

formatYearRangeLabel

Formats a label for a range of years (used by screen readers).

Parameters

start

string

end

string

Returns
string

Directive used to connect an input to a MatDatepicker.

Selector: input[matDatepicker]

Exported as: matDatepickerInput
Properties
Name Description
@Input('matDatepickerFilter')

dateFilter: DateFilterFn<D>

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

@Input({ transform: booleanAttribute })

disabled: boolean

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

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

@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>

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

stateChanges: Subject<void>

Emits when the internal state has changed

Methods
getConnectedOverlayOrigin

Gets the element that the datepicker popup should be connected 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

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

Selector: mat-date-range-picker

Exported as: matDateRangePicker
Properties
Name Description
@Input()

calendarHeaderComponent: ComponentType<any>

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

@Input()

color: ThemePalette

Theme color of the datepicker's calendar. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

@Input()

dateClass: MatCalendarCellClassFunction<D>

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

@Input({ transform: booleanAttribute })

disabled: boolean

Whether the datepicker pop-up should be disabled.

@Input({ transform: booleanAttribute })

opened: boolean

Whether the calendar is open.

@Input()

panelClass: string | string[]

Classes to be passed to the date picker panel.

@Input({ transform: booleanAttribute })

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({ transform: booleanAttribute })

touchUi: boolean

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

Preferred position of the datepicker in the X axis.

@Input()

yPosition: DatepickerDropdownPositionY

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

The id for the datepicker calendar.

stateChanges: Subject<void>

Emits when the datepicker's state changes.

Methods
close

Close the calendar.

open

Open the calendar.

registerActions

Registers a portal containing action buttons with the datepicker.

Parameters

portal

TemplatePortal<any>

Portal to be registered.

registerInput

Register an input with this datepicker.

Parameters

input

C

The datepicker input to register with this datepicker.

Returns
MatDateSelectionModel<S, D>

Selection model that the input should hook itself up to.

removeActions

Removes a portal containing action buttons from the datepicker.

Parameters

portal

TemplatePortal<any>

Portal to be removed.

select

Selects the given date

Parameters

date

D

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

Selector: input[matStartDate]

Properties
Name Description
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the datepicker-input is disabled.

@Input()

errorStateMatcher: ErrorStateMatcher

Object used to control when error messages are shown.

@Input()

value: D | null

The value of the input.

@Output()

dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>

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

@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>

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

errorState: boolean

Whether the input is in an error state.

stateChanges: Subject<void>

Emits when the internal state has changed

Methods
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

updateErrorState

Refreshes the error state of the input.

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

Selector: input[matEndDate]

Properties
Name Description
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the datepicker-input is disabled.

@Input()

errorStateMatcher: ErrorStateMatcher

Object used to control when error messages are shown.

@Input()

value: D | null

The value of the input.

@Output()

dateChange: EventEmitter<MatDatepickerInputEvent<D, S>>

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

@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D, S>>

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

errorState: boolean

Whether the input is in an error state.

stateChanges: Subject<void>

Emits when the internal state has changed

Methods
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

updateErrorState

Refreshes the error state of the input.

Default header for MatCalendar

Selector: mat-calendar-header

Exported as: matCalendarHeader
Properties
Name Description

calendar: inject<MatCalendar<D>>(MatCalendar)

nextButtonLabel: string

The label for the next button.

periodButtonDescription: string

The aria description for the current calendar view.

periodButtonLabel: string

The aria-label for changing the calendar view.

periodButtonText: string

The display text for the current calendar view.

prevButtonLabel: string

The label for the previous button.

Methods
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

A calendar that is used as part of the datepicker.

Selector: mat-calendar

Exported as: matCalendar
Properties
Name Description
@Input()

comparisonEnd: D | null

End of the comparison range.

@Input()

comparisonStart: D | null

Start of the comparison range.

@Input()

dateClass: MatCalendarCellClassFunction<D>

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

@Input()

dateFilter: (date: D) => boolean

Function used to filter which dates are selectable.

@Input()

endDateAccessibleName: string | null

ARIA Accessible name of the <input matEndDate/>

@Input()

headerComponent: ComponentType<any>

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

@Input()

maxDate: D | null

The maximum selectable date.

@Input()

minDate: D | null

The minimum selectable date.

@Input()

selected: DateRange<D> | D | null

The currently selected date.

@Input()

startAt: D | null

A date representing the period (month or year) to start the calendar in.

@Input()

startDateAccessibleName: string | null

ARIA Accessible name of the <input matStartDate/>

@Input()

startView: MatCalendarView

Whether the calendar should be started in month or year view.

@Output()

monthSelected: EventEmitter<D>

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

@Output()

selectedChange: EventEmitter<D | null>

Emits when the currently selected date changes.

@Output()

viewChanged: EventEmitter<MatCalendarView>

Emits when the current view changes.

@Output()

yearSelected: EventEmitter<D>

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

activeDate: D

The current active date. This determines which time period is shown and which date is highlighted when using keyboard navigation.

currentView: MatCalendarView

Whether the calendar is in month view.

monthView: MatMonthView<D>

Reference to the current month view component.

multiYearView: MatMultiYearView<D>

Reference to the current multi-year view component.

stateChanges: Subject<void>

Emits whenever there is a state change that the header may need to respond to.

yearView: MatYearView<D>

Reference to the current year view component.

Methods
focusActiveCell

Focuses the active date.

updateTodaysDate

Updates today's date after an update of the active date

Component responsible for managing the datepicker popup/dialog.

Selector: mat-datepicker

Exported as: matDatepicker
Properties
Name Description
@Input()

calendarHeaderComponent: ComponentType<any>

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

@Input()

color: ThemePalette

Theme color of the datepicker's calendar. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

@Input()

dateClass: MatCalendarCellClassFunction<D>

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

@Input({ transform: booleanAttribute })

disabled: boolean

Whether the datepicker pop-up should be disabled.

@Input({ transform: booleanAttribute })

opened: boolean

Whether the calendar is open.

@Input()

panelClass: string | string[]

Classes to be passed to the date picker panel.

@Input({ transform: booleanAttribute })

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({ transform: booleanAttribute })

touchUi: boolean

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

Preferred position of the datepicker in the X axis.

@Input()

yPosition: DatepickerDropdownPositionY

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

The id for the datepicker calendar.

stateChanges: Subject<void>

Emits when the datepicker's state changes.

Methods
close

Close the calendar.

open

Open the calendar.

registerActions

Registers a portal containing action buttons with the datepicker.

Parameters

portal

TemplatePortal<any>

Portal to be registered.

registerInput

Register an input with this datepicker.

Parameters

input

C

The datepicker input to register with this datepicker.

Returns
MatDateSelectionModel<S, D>

Selection model that the input should hook itself up to.

removeActions

Removes a portal containing action buttons from the datepicker.

Parameters

portal

TemplatePortal<any>

Portal to be removed.

select

Selects the given date

Parameters

date

D

Can be used to override the icon of a matDatepickerToggle.

Selector: [matDatepickerToggleIcon]

Selector: mat-datepicker-toggle

Exported as: matDatepickerToggle
Properties
Name Description
@Input('aria-label')

ariaLabel: string

Screen-reader 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({ transform: booleanAttribute })

disabled: boolean

Whether the toggle button is disabled.

Selector: mat-date-range-input

Exported as: matDateRangeInput
Properties
Name Description
@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({ transform: booleanAttribute })

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({ transform: booleanAttribute })

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: string

Unique ID for the group.

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.

Methods
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

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

Selector: [matDatepickerApply] [matDateRangePickerApply]

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

Selector: [matDatepickerCancel] [matDateRangePickerCancel]

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

Selector: mat-datepicker-actions mat-date-range-picker-actions

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.

Properties
Name Description

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.

Properties
Name Description

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.

Methods
createDrag

Called when the user has dragged a date in the currently selected range to another date. Returns the date updated range that should result from this interaction.

Parameters

dateOrigin

The date the user started dragging from.

originalRange

DateRange<D>

The originally selected date range.

newDate

D

The currently targeted date in the drag operation.

event

Event

DOM event that triggered the updated drag state. Will be mouseenter/mouseup or touchmove/touchend depending on the device type.

dragOrigin

D

Returns
DateRange<D> | null

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

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

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 event that triggered the selection. Currently only corresponds to a click event, but it may get expanded in the future.

Returns
DateRange<D>

Form control that can be associated with a datepicker.

Properties
Name Description

dateFilter: DateFilterFn<D>

disabled: boolean

max: D | null

min: D | null

stateChanges: Observable<void>

Methods
getConnectedOverlayOrigin
Returns
ElementRef

getOverlayLabelId
Returns
string | null

getStartValue
Returns
D | null

getThemePalette
Returns
ThemePalette

A datepicker that can be attached to a {@link MatDatepickerControl}.

Properties
Name Description

closedStream: EventEmitter<void>

Stream that emits whenever the date picker is closed.

color: ThemePalette

Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

datepickerInput: C

The input element the datepicker is associated with.

disabled: boolean

Whether the datepicker pop-up should be disabled.

id: string

The id for the datepicker's calendar.

opened: boolean

Whether the datepicker is open.

openedStream: EventEmitter<void>

Stream that emits whenever the date picker is opened.

stateChanges: Subject<void>

Emits when the datepicker's state changes.

Methods
open

Opens the datepicker.

registerInput

Register an input with the datepicker.

Parameters

input

C

Returns
MatDateSelectionModel<S, D>

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

Properties
Name Description

event: Event

value: D

Possible positions for the datepicker dropdown along the X axis.

type DatepickerDropdownPositionX = 'start' | 'end';

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. Datepicker can sometimes receive a null value as input for the date argument. This doesn't represent a "null date" but rather signifies that no date has been selected yet in the calendar.

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

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;

API reference for Angular Material datepicker-testing

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

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

Properties
Name Description

static hostSelector: '.mat-datepicker-input'

Methods
blur

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

Returns
Promise<void>

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

async
getCalendar

Gets the MatCalendarHarness that is associated with the trigger.

Parameters

filter

CalendarHarnessFilters = {}

Optionally filters which calendar is included.

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>

async
hasCalendar

Whether a calendar is associated with the input.

Returns
Promise<boolean>

async
host

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

Returns
Promise<TestElement>

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

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

static
with

Gets a HarnessPredicate that can be used to search for a MatDatepickerInputHarness that meets certain criteria.

Parameters

options

DatepickerInputHarnessFilters = {}

Options for filtering which input instances are considered a match.

Returns
HarnessPredicate<MatDatepickerInputHarness>

a HarnessPredicate configured with the given options.

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

Properties
Name Description

static hostSelector: '.mat-datepicker-toggle'

Methods
closeCalendar

Closes the calendar if it is open.

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>

hasCalendar

Gets whether there is a calendar associated with the trigger.

Returns
Promise<boolean>

async
host

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

Returns
Promise<TestElement>

async
isCalendarOpen

Gets whether the calendar associated with the toggle is open.

Returns
Promise<boolean>

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

static
with

Gets a HarnessPredicate that can be used to search for a MatDatepickerToggleHarness that meets certain criteria.

Parameters

options

DatepickerToggleHarnessFilters = {}

Options for filtering which datepicker toggle instances are considered a match.

Returns
HarnessPredicate<MatDatepickerToggleHarness>

a HarnessPredicate configured with the given options.

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

Properties
Name Description

static hostSelector: '.mat-start-date'

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

async
host

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>

static
with

Gets a HarnessPredicate that can be used to search for a MatStartDateHarness that meets certain criteria.

Parameters

options

DatepickerInputHarnessFilters = {}

Options for filtering which input instances are considered a match.

Returns
HarnessPredicate<MatStartDateHarness>

a HarnessPredicate configured with the given options.

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

Properties
Name Description

static hostSelector: '.mat-end-date'

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

async
host

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>

static
with

Gets a HarnessPredicate that can be used to search for a MatEndDateHarness that meets certain criteria.

Parameters

options

DatepickerInputHarnessFilters = {}

Options for filtering which input instances are considered a match.

Returns
HarnessPredicate<MatEndDateHarness>

a HarnessPredicate configured with the given options.

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

Properties
Name Description

static hostSelector: '.mat-date-range-input'

Methods
closeCalendar

Closes the calendar if it is open.

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>

async
getEndInput

Gets the inner start date input inside the range input.

Returns
Promise<MatEndDateHarness>

async
getSeparator

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

Returns
Promise<string>

async
getStartInput

Gets the inner start date input inside the range input.

Returns
Promise<MatStartDateHarness>

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

async
host

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

Returns
Promise<TestElement>

async
isCalendarOpen

Opens the calendar associated with the input.

Returns
Promise<boolean>

async
isDisabled

Gets whether the range input is disabled.

Returns
Promise<boolean>

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

static
with

Gets a HarnessPredicate that can be used to search for a MatDateRangeInputHarness that meets certain criteria.

Parameters

options

DateRangeInputHarnessFilters = {}

Options for filtering which input instances are considered a match.

Returns
HarnessPredicate<MatDateRangeInputHarness>

a HarnessPredicate configured with the given options.

Harness for interacting with a standard Material calendar in tests.

Properties
Name Description

static hostSelector: '.mat-calendar'

Methods
async
changeView

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

Returns
Promise<void>

Promise that resolves when the action completes.

async
getCells

Gets a list of cells inside the calendar.

Parameters

filter

CalendarCellHarnessFilters = {}

Optionally filters which cells are included.

Returns
Promise<MatCalendarCellHarness[]>

async
getCurrentView

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

Returns
Promise<CalendarView>

async
getCurrentViewLabel

Gets the label of the current calendar view.

Returns
Promise<string>

async
host

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

Returns
Promise<TestElement>

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

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

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

static
with

Gets a HarnessPredicate that can be used to search for a MatCalendarHarness that meets certain criteria.

Parameters

options

CalendarHarnessFilters = {}

Options for filtering which calendar instances are considered a match.

Returns
HarnessPredicate<MatCalendarHarness>

a HarnessPredicate configured with the given options.

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

Properties
Name Description

static hostSelector: '.mat-calendar-body-cell'

Methods
async
blur

Removes focus from the calendar cell.

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the calendar cell.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getAriaLabel

Gets the aria-label of the calendar cell.

Returns
Promise<string>

async
getText

Gets the text of the calendar cell.

Returns
Promise<string>

async
host

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

Returns
Promise<TestElement>

async
hover

Hovers over the calendar cell.

Returns
Promise<void>

Promise that resolves when the action completes.

async
isActive

Whether the cell is currently activated using keyboard navigation.

Returns
Promise<boolean>

async
isComparisonRangeEnd

Whether the cell is the end of the comparison range.

Returns
Promise<boolean>

async
isComparisonRangeStart

Whether the cell is the start of the comparison range.

Returns
Promise<boolean>

async
isDisabled

Whether the cell is disabled.

Returns
Promise<boolean>

async
isInComparisonRange

Whether the cell is inside of the comparison range.

Returns
Promise<boolean>

async
isInPreviewRange

Whether the cell is inside of the preview range.

Returns
Promise<boolean>

async
isInRange

Whether the cell is part of the main range.

Returns
Promise<boolean>

async
isPreviewRangeEnd

Whether the cell is the end of the preview range.

Returns
Promise<boolean>

async
isPreviewRangeStart

Whether the cell is the start of the preview range.

Returns
Promise<boolean>

async
isRangeEnd

Whether the cell is the end of the main range.

Returns
Promise<boolean>

async
isRangeStart

Whether the cell is the start of the main range.

Returns
Promise<boolean>

async
isSelected

Whether the cell is selected.

Returns
Promise<boolean>

async
isToday

Whether the cell represents today's date.

Returns
Promise<boolean>

async
mouseAway

Moves the mouse away from the calendar cell.

Returns
Promise<void>

Promise that resolves when the action completes.

async
select

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

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

Gets a HarnessPredicate that can be used to search for a MatCalendarCellHarness that meets certain criteria.

Parameters

options

CalendarCellHarnessFilters = {}

Options for filtering which cell instances are considered a match.

Returns
HarnessPredicate<MatCalendarCellHarness>

a HarnessPredicate configured with the given options.

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

Properties
Name Description

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.

Properties
Name Description

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.

Properties
Name Description

value: string | RegExp

Filters based on the value of the input.