Datepicker

Angular Material Datepicker enables users to select a date from a calendar interface. It supports both single date and date range selections, and the dates that can be picked can be restricted to the ones that make sense. BuilderKit restyles the calendar, the toggle and the range highlight.

Official docs API reference

The input and the toggle live inside a form field, which is what provides the label, the hint and the error messages around the datepicker.

Example

Below is an example of how BuilderKit restyles the Angular Material Datepicker and gives it a more modern appearance.

<mat-form-field>
  <input matInput [matDatepicker]="picker" />
  <mat-datepicker-toggle matIconSuffix [for]="picker" />
  <mat-datepicker #picker />
</mat-form-field>

Touch UI

The touchUi attribute opens the calendar in a centered dialog with larger targets, for touch devices.

<mat-form-field>
  <input matInput [matDatepicker]="picker" />
  <mat-datepicker-toggle matIconSuffix [for]="picker" />
  <mat-datepicker touchUi #picker />
</mat-form-field>

Disabling specific dates

Dates that are not available can be greyed out in the calendar, one by one for scattered days or as a continuous span with a minimum and a maximum. The example below allows weekdays only.

<mat-form-field>
  <input matInput [matDatepicker]="picker" [matDatepickerFilter]="weekdaysOnly" />
  <mat-datepicker-toggle matIconSuffix [for]="picker" />
  <mat-datepicker #picker />
</mat-form-field>

Date range picker

A range picker takes a start and an end date in one field and highlights everything between them in the calendar.

–

<mat-form-field>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate [(ngModel)]="stayStart" placeholder="Check in" />
    <input matEndDate [(ngModel)]="stayEnd" placeholder="Check out" />
  </mat-date-range-input>
  <mat-datepicker-toggle matIconSuffix [for]="picker" />
  <mat-date-range-picker #picker />
</mat-form-field>

Range picker actions

The mat-date-range-picker-actions element adds Cancel and Apply buttons, so the range is only committed on Apply.

–

<mat-form-field>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate [formField]="range.start" placeholder="Start date" />
    <input matEndDate [formField]="range.end" placeholder="End date" />
  </mat-date-range-input>
  <mat-datepicker-toggle matIconSuffix [for]="picker" />
  <mat-date-range-picker #picker>
    <mat-date-range-picker-actions>
      <button matButton matDateRangePickerCancel>Cancel</button>
      <button matButton class="primary" matDateRangePickerApply>Apply</button>
    </mat-date-range-picker-actions>
  </mat-date-range-picker>
  @if (range.start().invalid()) {
    <mat-error>Invalid start date</mat-error>
  }
  @if (range.end().invalid()) {
    <mat-error>Invalid end date</mat-error>
  }
</mat-form-field>

Common questions

Why does the calendar ignore my theme?

The calendar is rendered in an overlay outside the component, so the theme class has to be passed to it through the panelClass input.