Components

Timepicker

Angular Material Timepicker allows users to select a time by typing or choosing from a predefined list.

Example

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

Pick a time

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