Datepicker

Date range picker comparison ranges

–

First campaign

–

Second campaign

Date range picker forms integration

–

Enter a date range

Selected range: { "start": null, "end": null }

Basic date range picker

–

Enter a date range

Date range picker with custom a selection strategy

–

Enter a date range

Datepicker action buttons

Choose a date

–

Enter a date range

Datepicker open method

Choose a date

Datepicker palette colors

Inherited calendar color

Custom calendar color

Datepicker with custom calendar header

Custom calendar header

Datepicker with custom icon

Choose a date

Datepicker with custom date classes

Choose a date

Disabled datepicker

Completely disabled

Popup disabled

Input disabled

Datepicker input and change events

Input & change events

Datepicker with filter validation

Choose a date

Datepicker with custom formats

Verbose datepicker

Testing with MatDatepickerInputHarness

This example contains tests. Open in Stackblitz to run the tests.

Datepicker inline calendar example

Selected date:

Datepicker with different locale

Different locale

Datepicker with min & max validation

Choose a date

Datepicker that uses Moment.js dates

Moment.js datepicker

Basic datepicker

Choose a date

Datepicker start date

Choose a date

Datepicker touch UI

Choose a date

Datepicker selected value

Angular forms

Angular forms (w/ deserialization)

Value binding

Datepicker emulating a Year and month picker

Month and Year