Timepicker

Angular Material Timepicker allows users to select a time by typing or choosing from a predefined list. The dropdown holds one option per interval, the interval can be as coarse or as fine as the case needs, and the times outside a given window can be left out entirely. BuilderKit restyles the toggle, the dropdown and the selected option so the mat-timepicker component matches the rest of the design system.

For picking the day alongside the time, the datepicker component works on the same input and shares the same styling.

Example

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

<mat-form-field>
  <mat-label>Pick a time</mat-label>
  <input matInput [matTimepicker]="picker" />
  <mat-timepicker-toggle [for]="picker" matIconSuffix>
    <mat-icon svgIcon="clock" matTimepickerToggleIcon/>
  </mat-timepicker-toggle>
  <mat-timepicker #picker/>
</mat-form-field>

Choosing the interval between options

The dropdown lists one option per interval, so a wider interval gives a short list of round times and a narrower one gives finer steps to scroll through.

<mat-form-field>
  <mat-label>Every 15 minutes</mat-label>
  <input matInput [matTimepicker]="picker" />
  <mat-timepicker-toggle [for]="picker" matIconSuffix>
    <mat-icon svgIcon="clock" matTimepickerToggleIcon/>
  </mat-timepicker-toggle>
  <mat-timepicker interval="15m" #picker/>
</mat-form-field>

Limiting the selectable times

A minimum and a maximum trim the dropdown down to the hours that are actually open, and a time typed outside them is marked as invalid. The example below covers office hours only.

<mat-form-field>
  <mat-label>Office hours</mat-label>
  <input
    matInput
    [matTimepicker]="picker"
    [matTimepickerMin]="openingTime"
    [matTimepickerMax]="closingTime"
  />
  <mat-timepicker-toggle [for]="picker" matIconSuffix>
    <mat-icon svgIcon="clock" matTimepickerToggleIcon/>
  </mat-timepicker-toggle>
  <mat-timepicker interval="30m" #picker/>
</mat-form-field>