Timepicker

MatTimepicker allows users to select a time of day from a dropdown list.

Overview

<mat-timepicker> renders a listbox that can be used to select a time of day. It is intended to be used together with MatTimepickerInput directive.

Basic Usage

import { Component } from '@angular/core';
import { MatTimepickerModule } from '@angular/material/timepicker';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@Component({
  selector: 'app-timepicker-example',
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatTimepickerModule
  ],
  template: `
    <mat-form-field>
      <mat-label>Select time</mat-label>
      <input matInput [matTimepicker]="picker">
      <mat-timepicker-toggle matIconSuffix [for]="picker"></mat-timepicker-toggle>
      <mat-timepicker #picker></mat-timepicker>
    </mat-form-field>
  `
})
export class TimepickerExample {}

API Reference

MatTimepicker

Selector: mat-timepicker

Exported as: matTimepicker

Inputs

interval · number | string | null

Interval between each option in the timepicker. The value can either be an amount of seconds (e.g. 90) or a number with a unit (e.g. 45m). Supported units are s for seconds, m for minutes or h for hours.

options · readonly MatTimepickerOption<D>[] | null · default: "null"

Array of pre-defined options that the user can select from, as an alternative to using the interval input. An error will be thrown if both options and interval are specified.

disableRipple · boolean · default: "false"

Whether ripples within the timepicker should be disabled.

aria-label · string | null · default: "null"

ARIA label for the timepicker panel.

aria-labelledby · string | null · default: "null"

ID of the label element for the timepicker panel.

panelClass · string | string[]

Classes to be passed to the timepicker panel.

Outputs

selected · OutputEmitterRef<MatTimepickerSelected<D>>

Emits when the user selects a time.

opened · OutputEmitterRef<void>

Emits when the timepicker is opened.

closed · OutputEmitterRef<void>

Emits when the timepicker is closed.

Properties

isOpen · Signal<boolean>

Whether the timepicker is open.

disabled · Signal<boolean>

Whether the timepicker is currently disabled.

activeDescendant · Signal<string | null>

ID of the active descendant option.

panelId · string

Unique ID of the timepicker’s panel.

Methods

open() · void

Opens the timepicker.

close() · void

Closes the timepicker.

Usage Examples

Custom Interval

15 Minutes

<mat-timepicker [interval]="15m"></mat-timepicker>
<!-- or -->
<mat-timepicker [interval]="900"></mat-timepicker>

30 Minutes

<mat-timepicker [interval]="30m"></mat-timepicker>
<!-- or -->
<mat-timepicker [interval]="1800"></mat-timepicker>

1 Hour

<mat-timepicker [interval]="1h"></mat-timepicker>
<!-- or -->
<mat-timepicker [interval]="3600"></mat-timepicker>

Custom Options

import { Component } from '@angular/core';

@Component({
  selector: 'app-timepicker-custom-options',
  template: `
    <mat-form-field>
      <mat-label>Meeting time</mat-label>
      <input matInput [matTimepicker]="picker">
      <mat-timepicker #picker [options]="customOptions"></mat-timepicker>
    </mat-form-field>
  `
})
export class TimepickerCustomOptionsExample {
  customOptions = [
    { value: new Date(2024, 0, 1, 9, 0), label: '9:00 AM - Morning' },
    { value: new Date(2024, 0, 1, 13, 0), label: '1:00 PM - Lunch' },
    { value: new Date(2024, 0, 1, 17, 0), label: '5:00 PM - Evening' }
  ];
}

Reactive Forms

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-timepicker-reactive',
  template: `
    <mat-form-field>
      <mat-label>Appointment time</mat-label>
      <input matInput [matTimepicker]="picker" [formControl]="timeControl">
      <mat-timepicker-toggle matIconSuffix [for]="picker"></mat-timepicker-toggle>
      <mat-timepicker #picker [interval]="15m"></mat-timepicker>
    </mat-form-field>
    <p>Selected time: {{ timeControl.value | date:'shortTime' }}</p>
  `
})
export class TimepickerReactiveExample {
  timeControl = new FormControl(new Date());
}

Accessibility

• The timepicker input uses role="combobox" with appropriate ARIA attributes
• The timepicker panel uses role="listbox"
• Options use role="option"
• Full keyboard navigation support:
  • ARROW_UP/DOWN: Navigate through time options
  • HOME: Jump to first option
  • END: Jump to last option
  • PAGE_UP/DOWN: Navigate by page
  • ENTER: Select the focused time
  • ESCAPE: Close the timepicker
• Screen readers announce the selected time and navigation actions
• Use aria-label or ensure the input has a label via <mat-label>

Advanced Usage

Min and Max Times

export class TimepickerMinMaxExample {
  minTime = new Date(2024, 0, 1, 9, 0);  // 9:00 AM
  maxTime = new Date(2024, 0, 1, 17, 0); // 5:00 PM
}

<mat-form-field>
  <input matInput [matTimepicker]="picker" [min]="minTime" [max]="maxTime">
  <mat-timepicker #picker></mat-timepicker>
</mat-form-field>

Event Handling

export class TimepickerEventsExample {
  onTimeSelected(event: MatTimepickerSelected<Date>) {
    console.log('Time selected:', event.value);
  }
  
  onOpened() {
    console.log('Timepicker opened');
  }
  
  onClosed() {
    console.log('Timepicker closed');
  }
}

<mat-timepicker 
  (selected)="onTimeSelected($event)"
  (opened)="onOpened()"
  (closed)="onClosed()">
</mat-timepicker>

Custom Panel Classes

<mat-timepicker [panelClass]="['custom-timepicker-panel', 'elevated']">
</mat-timepicker>

Disable Ripple

<mat-timepicker [disableRipple]="true"></mat-timepicker>

Global Configuration

import { MAT_TIMEPICKER_CONFIG } from '@angular/material/timepicker';

@NgModule({
  providers: [
    {
      provide: MAT_TIMEPICKER_CONFIG,
      useValue: {
        interval: '30m',
        disableRipple: false
      }
    }
  ]
})
export class AppModule {}