API reference for Angular Material datepicker
import {MatDatepickerModule} from '@angular/material/datepicker';
Services
DefaultMatCalendarRangeStrategy
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>
|
|
MatDatepickerIntl
Datepicker data that requires internationalization.
Properties
Name | Description |
---|---|
|
A label for the calendar popup (used by screen readers). |
|
Stream that emits whenever the labels here are changed. Use this to notify components if the labels have changed after initialization. |
|
Label for the button used to close the calendar popup. |
|
A label for the Comparison date of a range of dates (used by screen readers). |
|
A label for the next month button (used by screen readers). |
|
A label for the next multi-year button (used by screen readers). |
|
A label for the next year button (used by screen readers). |
|
A label for the button used to open the calendar popup (used by screen readers). |
|
A label for the previous month button (used by screen readers). |
|
A label for the previous multi-year button (used by screen readers). |
|
A label for the previous year button (used by screen readers). |
|
A label for the 'switch to month view' button (used by screen readers). |
|
A label for the 'switch to year view' button (used by screen readers). |
Deprecated
|
A label for the last date of a range of dates (used by screen readers). |
Deprecated
|
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
|
|
Directives
MatDatepickerInput
Directive used to connect an input to a MatDatepicker.
Selector: input[matDatepicker]
Exported as: matDatepickerInputProperties
Name | Description |
---|---|
@Input('matDatepickerFilter')
|
Function that can be used to filter out dates within the datepicker. |
@Input({ transform: booleanAttribute })
|
Whether the datepicker-input is disabled. |
@Input()
|
The datepicker that this input is associated with. |
@Input()
|
The maximum valid date. |
@Input()
|
The minimum valid date. |
@Input()
|
The value of the input. |
@Output()
|
Emits when a |
@Output()
|
Emits when an |
|
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
|
|
MatDateRangePicker
Component responsible for managing the date range picker popup/dialog.
Selector: mat-date-range-picker
Exported as: matDateRangePickerProperties
Name | Description |
---|---|
@Input()
|
An input indicating the type of the custom header component for the calendar, if set. |
@Input()
|
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()
|
Function that can be used to add custom CSS classes to dates. |
@Input({ transform: booleanAttribute })
|
Whether the datepicker pop-up should be disabled. |
@Input({ transform: booleanAttribute })
|
Whether the calendar is open. |
@Input()
|
Classes to be passed to the date picker panel. |
@Input({ transform: booleanAttribute })
|
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()
|
The date to open the calendar to initially. |
@Input()
|
The view that the calendar should start in. |
@Input({ transform: booleanAttribute })
|
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()
|
Preferred position of the datepicker in the X axis. |
@Input()
|
Preferred position of the datepicker in the Y axis. |
@Output('closed')
|
Emits when the datepicker has been closed. |
@Output()
|
Emits selected month in year view. This doesn't imply a change on the selected date. |
@Output('opened')
|
Emits when the datepicker has been opened. |
@Output()
|
Emits when the current view changes. |
@Output()
|
Emits selected year in multiyear view. This doesn't imply a change on the selected date. |
|
The input element this datepicker is associated with. |
|
The id for the datepicker calendar. |
|
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
|
|
MatStartDate
Input for entering the start date in a mat-date-range-input
.
Selector: input[matStartDate]
Properties
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
Whether the datepicker-input is disabled. |
@Input()
|
Object used to control when error messages are shown. |
@Input()
|
The value of the input. |
@Output()
|
Emits when a |
@Output()
|
Emits when an |
|
Whether the input is in an error state. |
|
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. |
MatEndDate
Input for entering the end date in a mat-date-range-input
.
Selector: input[matEndDate]
Properties
Name | Description |
---|---|
@Input({ transform: booleanAttribute })
|
Whether the datepicker-input is disabled. |
@Input()
|
Object used to control when error messages are shown. |
@Input()
|
The value of the input. |
@Output()
|
Emits when a |
@Output()
|
Emits when an |
|
Whether the input is in an error state. |
|
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. |
MatCalendarHeader
Default header for MatCalendar
Selector: mat-calendar-header
Exported as: matCalendarHeaderProperties
Name | Description |
---|---|
|
|
|
The label for the next button. |
|
The aria description for the current calendar view. |
|
The |
|
The display text for the current calendar view. |
|
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
|
|
MatCalendar
A calendar that is used as part of the datepicker.
Selector: mat-calendar
Exported as: matCalendarProperties
Name | Description |
---|---|
@Input()
|
End of the comparison range. |
@Input()
|
Start of the comparison range. |
@Input()
|
Function that can be used to add custom CSS classes to dates. |
@Input()
|
Function used to filter which dates are selectable. |
@Input()
|
ARIA Accessible name of the |
@Input()
|
An input indicating the type of the header component, if set. |
@Input()
|
The maximum selectable date. |
@Input()
|
The minimum selectable date. |
@Input()
|
The currently selected date. |
@Input()
|
A date representing the period (month or year) to start the calendar in. |
@Input()
|
ARIA Accessible name of the |
@Input()
|
Whether the calendar should be started in month or year view. |
@Output()
|
Emits the month chosen in year view. This doesn't imply a change on the selected date. |
@Output()
|
Emits when the currently selected date changes. |
@Output()
|
Emits when the current view changes. |
@Output()
|
Emits the year chosen in multiyear view. This doesn't imply a change on the selected date. |
|
The current active date. This determines which time period is shown and which date is highlighted when using keyboard navigation. |
|
Whether the calendar is in month view. |
|
Reference to the current month view component. |
|
Reference to the current multi-year view component. |
|
Emits whenever there is a state change that the header may need to respond to. |
|
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 |
MatDatepicker
Component responsible for managing the datepicker popup/dialog.
Selector: mat-datepicker
Exported as: matDatepickerProperties
Name | Description |
---|---|
@Input()
|
An input indicating the type of the custom header component for the calendar, if set. |
@Input()
|
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()
|
Function that can be used to add custom CSS classes to dates. |
@Input({ transform: booleanAttribute })
|
Whether the datepicker pop-up should be disabled. |
@Input({ transform: booleanAttribute })
|
Whether the calendar is open. |
@Input()
|
Classes to be passed to the date picker panel. |
@Input({ transform: booleanAttribute })
|
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()
|
The date to open the calendar to initially. |
@Input()
|
The view that the calendar should start in. |
@Input({ transform: booleanAttribute })
|
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()
|
Preferred position of the datepicker in the X axis. |
@Input()
|
Preferred position of the datepicker in the Y axis. |
@Output('closed')
|
Emits when the datepicker has been closed. |
@Output()
|
Emits selected month in year view. This doesn't imply a change on the selected date. |
@Output('opened')
|
Emits when the datepicker has been opened. |
@Output()
|
Emits when the current view changes. |
@Output()
|
Emits selected year in multiyear view. This doesn't imply a change on the selected date. |
|
The input element this datepicker is associated with. |
|
The id for the datepicker calendar. |
|
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
|
|
MatDatepickerToggleIcon
Can be used to override the icon of a matDatepickerToggle
.
Selector: [matDatepickerToggleIcon]
MatDatepickerToggle
Selector: mat-datepicker-toggle
Exported as: matDatepickerToggleProperties
Name | Description |
---|---|
@Input('aria-label')
|
Screen-reader label for the button. |
@Input('for')
|
Datepicker instance that the button will toggle. |
@Input()
|
Whether ripples on the toggle should be disabled. |
@Input({ transform: booleanAttribute })
|
Whether the toggle button is disabled. |
MatDateRangeInput
Selector: mat-date-range-input
Exported as: matDateRangeInputProperties
Name | Description |
---|---|
@Input()
|
End of the comparison range that should be shown in the calendar. |
@Input()
|
Start of the comparison range that should be shown in the calendar. |
@Input()
|
Function that can be used to filter out dates within the date range picker. |
@Input({ transform: booleanAttribute })
|
Whether the input is disabled. |
@Input()
|
The maximum valid date. |
@Input()
|
The minimum valid date. |
@Input()
|
The range picker that this input is associated with. |
@Input({ transform: booleanAttribute })
|
Whether the input is required. |
@Input()
|
Separator text to be shown between the inputs. |
|
Name of the form control. |
|
Whether the datepicker input is empty. |
|
Whether the input is in an error state. |
|
Whether the control is focused. |
|
Unique ID for the group. |
|
Whether the control's label should float. |
|
Emits when the input's state has changed. |
|
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
|
|
MatDatepickerApply
Button that will close the datepicker and assign the current selection to the data model.
Selector: [matDatepickerApply] [matDateRangePickerApply]
MatDatepickerCancel
Button that will close the datepicker and discard the current selection.
Selector: [matDatepickerCancel] [matDateRangePickerCancel]
MatDatepickerActions
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
Classes
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.
Properties
Name | Description |
---|---|
|
Reference to the datepicker input component that emitted the event. |
|
Reference to the native input element associated with the datepicker input. |
|
The new value for the target datepicker input. |
DateRange
A class representing a range of dates.
Properties
Name | Description |
---|---|
|
The end date of the range. |
|
The start date of the range. |
Interfaces
MatDateRangeSelectionStrategy
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
|
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
|
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 |
Returns | |
DateRange<D>
|
|
MatDatepickerControl
Form control that can be associated with a datepicker.
Properties
Name | Description |
---|---|
|
|
|
|
|
|
|
|
|
Methods
getConnectedOverlayOrigin | |
---|---|
Returns | |
ElementRef
|
|
getOverlayLabelId | |
---|---|
Returns | |
string | null
|
|
getStartValue | |
---|---|
Returns | |
D | null
|
|
getThemePalette | |
---|---|
Returns | |
ThemePalette
|
|
MatDatepickerPanel
A datepicker that can be attached to a {@link MatDatepickerControl}.
Properties
Name | Description |
---|---|
|
Stream that emits whenever the date picker is closed. |
|
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 |
|
The input element the datepicker is associated with. |
|
Whether the datepicker pop-up should be disabled. |
|
The id for the datepicker's calendar. |
|
Whether the datepicker is open. |
|
Stream that emits whenever the date picker is opened. |
|
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>
|
|
MatCalendarUserEvent
Event emitted when a date inside the calendar is triggered as a result of a user action.
Properties
Name | Description |
---|---|
|
|
|
Type aliases
DatepickerDropdownPositionX
Possible positions for the datepicker dropdown along the X axis.
type DatepickerDropdownPositionX = 'start' | 'end';
DatepickerDropdownPositionY
Possible positions for the datepicker dropdown along the Y axis.
type DatepickerDropdownPositionY = 'above' | 'below';
DateFilterFn
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;
MatCalendarCellCssClasses
Extra CSS classes that can be associated with a calendar cell.
type MatCalendarCellCssClasses = string | string[] | Set<string> | {
[key: string]: any;
};
MatCalendarCellClassFunction
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;
Constants
MAT_DATE_RANGE_SELECTION_STRATEGY
Injection token used to customize the date range selection behavior.
const MAT_DATE_RANGE_SELECTION_STRATEGY: InjectionToken<MatDateRangeSelectionStrategy<any>>;
MAT_DATEPICKER_SCROLL_STRATEGY
Injection token that determines the scroll handling while the calendar is open.
const MAT_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
yearsPerPage
const yearsPerPage: 24;
yearsPerRow
const yearsPerRow: 4;
API reference for Angular Material datepicker-testing
import {MatDatepickerInputHarness} from '@angular/material/datepicker/testing';
Classes
MatDatepickerInputHarness
Harness for interacting with a standard Material datepicker inputs in tests.
Properties
Name | Description |
---|---|
|
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 |
|
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 |
|
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 |
|
Parameters | |
options DatepickerInputHarnessFilters = {}
|
Options for filtering which input instances are considered a match. |
Returns | |
HarnessPredicate<MatDatepickerInputHarness>
|
a |
MatDatepickerToggleHarness
Harness for interacting with a standard Material datepicker toggle in tests.
Properties
Name | Description |
---|---|
|
Methods
closeCalendar | |
---|---|
Closes the calendar if it is open. |
|
Returns | |
Promise<void>
|
|
getCalendar | |
---|---|
Gets the |
|
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 |
|
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 |
|
Parameters | |
options DatepickerToggleHarnessFilters = {}
|
Options for filtering which datepicker toggle instances are considered a match. |
Returns | |
HarnessPredicate<MatDatepickerToggleHarness>
|
a |
MatStartDateHarness
Harness for interacting with a standard Material date range start input in tests.
Properties
Name | Description |
---|---|
|
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 |
|
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 |
|
Parameters | |
options DatepickerInputHarnessFilters = {}
|
Options for filtering which input instances are considered a match. |
Returns | |
HarnessPredicate<MatStartDateHarness>
|
a |
MatEndDateHarness
Harness for interacting with a standard Material date range end input in tests.
Properties
Name | Description |
---|---|
|
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 |
|
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 |
|
Parameters | |
options DatepickerInputHarnessFilters = {}
|
Options for filtering which input instances are considered a match. |
Returns | |
HarnessPredicate<MatEndDateHarness>
|
a |
MatDateRangeInputHarness
Harness for interacting with a standard Material date range input in tests.
Properties
Name | Description |
---|---|
|
Methods
closeCalendar | |
---|---|
Closes the calendar if it is open. |
|
Returns | |
Promise<void>
|
|
getCalendar | |
---|---|
Gets the |
|
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 |
|
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 |
|
Parameters | |
options DateRangeInputHarnessFilters = {}
|
Options for filtering which input instances are considered a match. |
Returns | |
HarnessPredicate<MatDateRangeInputHarness>
|
a |
MatCalendarHarness
extends
ComponentHarness
Harness for interacting with a standard Material calendar in tests.
Properties
Name | Description |
---|---|
|
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 |
|
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 |
|
Parameters | |
options CalendarHarnessFilters = {}
|
Options for filtering which calendar instances are considered a match. |
Returns | |
HarnessPredicate<MatCalendarHarness>
|
a |
MatCalendarCellHarness
extends
ComponentHarness
Harness for interacting with a standard Material calendar cell in tests.
Properties
Name | Description |
---|---|
|
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 |
|
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 |
|
Parameters | |
options CalendarCellHarnessFilters = {}
|
Options for filtering which cell instances are considered a match. |
Returns | |
HarnessPredicate<MatCalendarCellHarness>
|
a |
Interfaces
DatepickerInputHarnessFilters
A set of criteria that can be used to filter a list of datepicker input instances.
Properties
Name | Description |
---|---|
|
Filters based on the placeholder text of the input. |
|
Filters based on the value of the input. |
DatepickerToggleHarnessFilters
A set of criteria that can be used to filter a list of datepicker toggle instances.
CalendarHarnessFilters
A set of criteria that can be used to filter a list of calendar instances.
CalendarCellHarnessFilters
A set of criteria that can be used to filter a list of calendar cell instances.
Properties
Name | Description |
---|---|
|
Filters based on whether the cell is activated using keyboard navigation |
|
Filters based on whether the cell is disabled. |
|
Filters based on whether the cell is inside of the comparison range. |
|
Filters based on whether the cell is inside of the preview range. |
|
Filters based on whether the cell is inside of the main range. |
|
Filters based on whether the cell is selected. |
|
Filters based on the text of the cell. |
|
Filters based on whether the cell represents today's date. |
DateRangeInputHarnessFilters
A set of criteria that can be used to filter a list of date range input instances.
Properties
Name | Description |
---|---|
|
Filters based on the value of the input. |