Angular Material Timepicker


Version Compatibility

| mat-timepicker | Angular | Notes |
| -------------- | ------- | ------------------------------------------------ |
| 5.5.x | 19.x | Standalone components |
| 5.4.x | 18.x | |
| 5.3.x | 17.x | |
| 5.2.x | 16.x | Added matTimepickerToggle directive |
| 5.1.x | 15.x | |
| 5.0.x | 14.x | i18n no longer requires @angular/localize/init |

Installation

- npm install mat-timepicker || yarn add mat-timepicker

Features:

- Clock view dialog for selecting hour and minutes and options for dialog toggle customizations.
- Input time editing.
- Validations: minDate / maxDate (options: strict - datetime check / non-strict - time check).
- The timepicker can be used with template and reactive forms.

Configuration and usage

Keep in mind that the selector for the timepicker directive is _input[matTimepicker]_

$3

You can import the MatTimepickerModule or import the directives directly:

``typescript
import { Component } from "@angular/core";
import { MatTimepickerDirective, MatTimepickerToggleDirective } from "mat-timepicker";

@Component({
selector: "app-example",
standalone: true,
imports: [MatTimepickerDirective, MatTimepickerToggleDirective],
template:

access_time
,
})
export class ExampleComponent {}
`

$3

`typescript
import { MatTimepickerModule } from 'mat-timepicker';

@NgModule({
declarations: [...],
imports: [MatTimepickerModule],
...
})
export class YourModule { }
`

Simple Case

`html

`

$3

Using the new matTimepickerToggle directive for cleaner syntax:

`html

TIMEPICKER

access_time

`

$3

`html

TIMEPICKER


access_time




Invalid Date

`

$3

The matTimepickerToggle directive provides a simple way to open the timepicker dialog:

`html

Open
access_time
`

This automatically:

- Opens the timepicker dialog on click
- Sets cursor to pointer
- Stops event propagation

$3

`typescript
@Input() required = false;
@Input() disabled = false;
@Input() placeholder = null;

/ Use a custom template for the ok button /
@Input() okButtonTemplate: TemplateRef | null = null;
/ Use a custom template for the cancel button /
@Input() cancelButtonTemplate: TemplateRef | null = null;
/* Where:
export interface MatTimepickerButtonTemplateContext {
$implicit: () => void; <--- The click handler for each the button (either okClickHandler/closeClickHandler)
label: string; <--- The label that was provided to the mat-timepicker directive (either okLabel/cancelLabel)
}
In order to use this check out the bottom of the template driven form inside the example app
*/

/ Override the label of the ok button. /
@Input() okLabel = 'Ok';

/ Override the label of the cancel button. /
@Input() cancelLabel = 'Cancel';

/* Override the ante meridiem abbreviation. /
@Input() anteMeridiemAbbreviation = 'am';

/* Override the post meridiem abbreviation. /
@Input() postMeridiemAbbreviation = 'pm';

/ Sets the clock mode, 12-hour or 24-hour clocks are supported. /
@Input() mode: '12h' | '24h' = '24h';

/ Set the color of the timepicker control /
@Input() color: ThemePalette = 'primary';

/ Set the value of the timepicker control /
/ ⚠️(when using template driven forms then you should use [ngModel]="someValue")⚠️ /
@Input() value: Date = new Date();

/ Minimum time to pick from /
@Input() minDate: Date;

/ Maximum time to pick from /
@Input() maxDate: Date;

/ Disables the dialog open when clicking the input field /
@Input() disableDialogOpenOnClick = false;

/ Input that allows you to control when the control is in an errored state /
/ (check out the demo app) /
@Input() errorStateMatcher: ErrorStateMatcher;

/ Strict mode checks the full date (Day/Month/Year Hours:Minutes) when doing the minDate maxDate validation. If you need to check only the Hours:Minutes then you can set it to false /
@Input() strict = true;

/ Emits when time has changed /
@Output() timeChange: EventEmitter = new EventEmitter();

/ Emits when the input is invalid /
@Output() invalidInput: EventEmitter = new EventEmitter();
`

$3

---

What's New in v5.2.0

- ✨ New matTimepickerToggle directive - Simpler syntax for toggle buttons/icons
- 🐛 Fixed meridiem conversion bugs - Correctly handles PM times and 12 AM (midnight)
- 🐛 Improved validation - Invalid values no longer saved to model
- ✅ Enhanced test coverage - 95% code coverage with comprehensive tests
- 🧹 Code quality improvements - Removed dead code and improved maintainability

---

i18n (v5.0.0+)

In versions before v5.0.0 putting import '@angular/localize/init'; inside polyfills.ts was mandatory. From v5.0.0 it is no longer mandatory (which is useful for users that are not using i18n). In order to use i18n you have to use the inputs: okLabel, cancelLabel.

Please note that you need to provide both the input attribute and the value (e.g. okLabel="Ok") and the i18n attribute (e.g. i18n-okLabel="|@@") for more info check out this

Example:

`html



``

---

Dialog View

Hour Select (24h):

!alt text")

Minutes Select:

!alt text")