ngx-mat-timepicker

The timepicker module using Angular material.

Versions

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

You can also use mat.theme mixin instead.

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