18.0.2 • Published 9 months ago

@dhutaryan/ngx-mat-timepicker v18.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

ngx-mat-timepicker

npm code factor license npm bundle size

The timepicker module using Angular material.

Versions

mat-timepickerAngular
12.x.x>=12.0.0 && <15.0.0
13.x.x>=13.0.0 && <15.0.0
14.x.x^14.0.0
15.x.x^15.0.0
16.x.x^16.0.0
17.x.x^17.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 { MatNativeDateTimeModule, MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";

@NgModule({
  imports: [
    // ...
    MatTimepickerModule,
    MatNativeDateTimeModule,
    // ...
  ],
})
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);

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 { LOCALE_ID, NgModule } from '@angular/core';

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

License

MIT

15.3.0

1 year ago

15.3.1

1 year ago

18.0.2

9 months ago

18.0.1

12 months ago

18.0.0

12 months ago

17.5.0

1 year ago

17.5.1

1 year ago

16.3.1

1 year ago

16.3.0

1 year ago

15.4.1

9 months ago

15.4.0

1 year ago

15.2.2

1 year ago

13.2.4

1 year ago

13.2.2

1 year ago

13.2.3

1 year ago

14.2.2

1 year ago

14.2.3

1 year ago

14.2.4

1 year ago

12.5.2

1 year ago

12.5.3

1 year ago

12.5.4

1 year ago

17.6.1

9 months ago

17.6.0

1 year ago

17.4.2

1 year ago

16.4.1

9 months ago

16.4.0

1 year ago

16.2.2

1 year ago

15.2.1

1 year ago

13.2.1

1 year ago

14.2.1

1 year ago

12.5.1

1 year ago

17.4.1

1 year ago

16.2.1

1 year ago

15.2.0

1 year ago

13.2.0

1 year ago

14.2.0

1 year ago

12.5.0

1 year ago

17.4.0

1 year ago

16.2.0

1 year ago

17.3.0

1 year ago

17.2.0

2 years ago

15.1.0

2 years ago

14.1.0

2 years ago

13.1.0

2 years ago

12.4.0

2 years ago

17.1.0

2 years ago

16.1.0

2 years ago

12.3.0

2 years ago

12.3.1

2 years ago

15.0.2

2 years ago

15.0.3

2 years ago

15.0.0

2 years ago

15.0.1

2 years ago

12.2.0

2 years ago

17.0.1

2 years ago

17.0.0

2 years ago

14.0.0

2 years ago

16.0.2

2 years ago

13.0.0

2 years ago

16.0.1

2 years ago

16.0.0

2 years ago

12.1.0

2 years ago

12.0.1

2 years ago

12.0.0

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago