The timepicker module using Angular material.
| 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 |
Check out the documentation.
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-timepickeror
$ yarn add @dhutaryan/ngx-mat-timepickerImport MatTimepickerModule to your project.
import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
@NgModule({
imports: [
// ...
MatTimepickerModule,
// ...
],
})
export class MyModule {}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 {}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)<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>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 {}MIT
