ngx-mat-timepicker

The timepicker module using Angular material.

Versions

mat-timepicker	Angular
18.x.x	>=18.0.0
17.x.x	^17.0.0
16.x.x	^16.0.0
15.x.x	^15.0.0
14.x.x	^14.0.0
13.x.x	>=13.0.0 && <15.0.0
12.x.x	>=12.0.0 && <15.0.0

Documentation

Check out the documentation.

Installation

You have to install the Angular Material and set it up. Learn more about the setup.

Install the library:

$ npm install --save @dhutaryan/ngx-mat-timepicker

or

$ yarn add @dhutaryan/ngx-mat-timepicker

Getting started

Import MatTimepickerModule to your project.

import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
})
export class MyModule {}

Adapter

Add a timepicker adapter.

import { MatTimepickerModule, provideNativeDateTimeAdapter } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
  providers: [provideNativeDateTimeAdapter()]
})
export class MyModule {}

or create your own

import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    // ...
  ],
  providers: [{ provide: TimeAdapter, useClass: MyTimeAdapter }],
})
export class MyModule {}

Theming

Then you have to define a theme. More details about theming.

@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;

// timepicker uses these component
@include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
@include mat.input-theme(theme.$ngx-mat-timepicker-theme);
@include mat.button-theme(theme.$ngx-mat-timepicker-theme);
@include mat.fab-theme(theme.$ngx-mat-timepicker-theme);
@include mat.icon-button-theme(theme.$ngx-mat-timepicker-theme);
@include mat.divider-theme(theme.$ngx-mat-timepicker-theme);

// timepicker theme
@include mat-timepicker.timepicker-theme($theme);

// if you want to support color attribute in M3 add compatibility mixin
@include mat.color-variants-backwards-compatibility($my-theme)

Usage

<mat-form-field>
  <input type="text" matInput [matTimepicker]="timepicker" />
  <mat-timepicker-toggle matSuffix [for]="timepicker"></mat-timepicker-toggle>
  <mat-timepicker #timepicker></mat-timepicker>
</mat-form-field>

Locale

Default locale is en-US. You can set your locale as:

import { NgModule } from '@angular/core';
import { MAT_TIME_LOCALE } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
  ],
  providers: [{ provide: MAT_TIME_LOCALE, useValue: "en-GB" }],
})
export class MyModule {}

License

MIT