17.3.0 • Published 2 months ago
@dhutaryan/ngx-mat-timepicker v17.3.0
ngx-mat-timepicker
The timepicker module using Angular material.
Versions
mat-timepicker | Angular |
---|---|
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 { MAT_TIME_LOCALE } from "@dhutaryan/ngx-mat-timepicker";
@NgModule({
imports: [
// ...
],
providers: [{ provide: MAT_TIME_LOCALE, useValue: "en-GB" }],
})
export class MyModule {}
License
MIT
17.3.0
2 months ago
17.2.0
4 months ago
15.1.0
5 months ago
14.1.0
5 months ago
13.1.0
5 months ago
12.4.0
5 months ago
17.1.0
5 months ago
16.1.0
5 months ago
12.3.0
8 months ago
12.3.1
8 months ago
15.0.2
6 months ago
15.0.3
6 months ago
15.0.0
8 months ago
15.0.1
6 months ago
12.2.0
9 months ago
17.0.1
6 months ago
17.0.0
6 months ago
14.0.0
8 months ago
16.0.2
6 months ago
13.0.0
8 months ago
16.0.1
6 months ago
16.0.0
8 months ago
12.1.0
11 months ago
12.0.1
12 months ago
12.0.0
12 months ago
0.0.2
1 year ago
0.0.1
1 year ago