Datepicker

API for datepicker

API reference for Angular Material datepicker

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

Datepicker data that requires internationalization.

Properties
Name Description

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.

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

Default header for MatCalendar

Selector: mat-calendar-header

Exported as: matCalendarHeader
Properties
Name Description

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

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

Color palette to use on the datepicker's calendar.
@Input()

dateClass: (date: D) => MatCalendarCellCssClasses

Function that can be used to add custom CSS classes to dates.
@Input()

disabled: boolean

Whether the datepicker pop-up should be disabled.
@Input()

opened: boolean

Whether the calendar is open.
@Input()

panelClass: string | string[]

Classes to be passed to the date picker panel. Supports the same syntax as ngClass.
@Input()

startAt: D | null

The date to open the calendar to initially.
@Input()

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

The view that the calendar should start in.
@Input()

touchUi: boolean

Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets.
@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()

yearSelected: EventEmitter<D>

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

id: string

The id for the datepicker calendar.
Methods
close

Close the calendar.
open

Open the calendar.
select

Selects the given date
Parameters

date

D

Directive used to connect an input to a MatDatepicker.

Selector: input[matDatepicker]

Exported as: matDatepickerInput
Properties
Name Description
@Input()

disabled: boolean

Whether the datepicker-input is disabled.
@Input()

matDatepicker: MatDatepicker<D>

The datepicker that this input is associated with.
@Input()

matDatepickerFilter: (date: D) => boolean

Function that can be used to filter out dates within the datepicker.
@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>>

Emits when a change event is fired on this <input>.
@Output()

dateInput: EventEmitter<MatDatepickerInputEvent<D>>

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

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

The element to connect the popup to.
Deprecated
getPopupConnectionElementRef
Returns
ElementRef

Can be used to override the icon of a matDatepickerToggle.

Selector: [matDatepickerToggleIcon]

Selector: mat-datepicker-toggle

Exported as: matDatepickerToggle
Properties
Name Description
@Input('for')

datepicker: MatDatepicker<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.

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

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

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

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

const MAT_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;