@dhutaryan/ngx-mat-timepicker 20.1.0 → 21.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -11,6 +11,7 @@ The timepicker module using Angular material.
|
|
|
11
11
|
|
|
12
12
|
| mat-timepicker | Angular |
|
|
13
13
|
| -------------- | ------------------- |
|
|
14
|
+
| 21.x.x | >=21.0.0 |
|
|
14
15
|
| 20.1.x | >=20.2.0 |
|
|
15
16
|
| 20.0.x | >=20.0.0 |
|
|
16
17
|
| 19.x.x | >=19.0.0 |
|
|
@@ -47,7 +48,7 @@ $ yarn add @dhutaryan/ngx-mat-timepicker
|
|
|
47
48
|
Import `MatTimepickerModule` to your project.
|
|
48
49
|
|
|
49
50
|
```typescript
|
|
50
|
-
import { MatTimepickerModule } from
|
|
51
|
+
import { MatTimepickerModule } from '@dhutaryan/ngx-mat-timepicker';
|
|
51
52
|
|
|
52
53
|
@NgModule({
|
|
53
54
|
imports: [
|
|
@@ -64,7 +65,10 @@ export class MyModule {}
|
|
|
64
65
|
Add a timepicker adapter.
|
|
65
66
|
|
|
66
67
|
```typescript
|
|
67
|
-
import {
|
|
68
|
+
import {
|
|
69
|
+
MatTimepickerModule,
|
|
70
|
+
provideNativeDateTimeAdapter,
|
|
71
|
+
} from '@dhutaryan/ngx-mat-timepicker';
|
|
68
72
|
|
|
69
73
|
@NgModule({
|
|
70
74
|
imports: [
|
|
@@ -72,7 +76,7 @@ import { MatTimepickerModule, provideNativeDateTimeAdapter } from "@dhutaryan/ng
|
|
|
72
76
|
MatTimepickerModule,
|
|
73
77
|
// ...
|
|
74
78
|
],
|
|
75
|
-
providers: [provideNativeDateTimeAdapter()]
|
|
79
|
+
providers: [provideNativeDateTimeAdapter()],
|
|
76
80
|
})
|
|
77
81
|
export class MyModule {}
|
|
78
82
|
```
|
|
@@ -80,7 +84,7 @@ export class MyModule {}
|
|
|
80
84
|
or create your own
|
|
81
85
|
|
|
82
86
|
```typescript
|
|
83
|
-
import { MatTimepickerModule } from
|
|
87
|
+
import { MatTimepickerModule } from '@dhutaryan/ngx-mat-timepicker';
|
|
84
88
|
|
|
85
89
|
@NgModule({
|
|
86
90
|
imports: [
|
|
@@ -98,7 +102,7 @@ export class MyModule {}
|
|
|
98
102
|
Then you have to define a theme. [More details about theming](https://material.angular.io/guide/theming).
|
|
99
103
|
|
|
100
104
|
```scss
|
|
101
|
-
@use
|
|
105
|
+
@use '@dhutaryan/ngx-mat-timepicker' as mat-timepicker;
|
|
102
106
|
|
|
103
107
|
// timepicker uses these component
|
|
104
108
|
@include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
|
|
@@ -112,7 +116,7 @@ Then you have to define a theme. [More details about theming](https://material.a
|
|
|
112
116
|
@include mat-timepicker.timepicker-theme($theme);
|
|
113
117
|
|
|
114
118
|
// if you want to support color attribute in M3 add compatibility mixin
|
|
115
|
-
@include mat.color-variants-backwards-compatibility($my-theme)
|
|
119
|
+
@include mat.color-variants-backwards-compatibility($my-theme);
|
|
116
120
|
```
|
|
117
121
|
|
|
118
122
|
You can also use `mat.theme` mixin instead.
|
|
@@ -133,13 +137,13 @@ Default locale is `en-US`. You can set your locale as:
|
|
|
133
137
|
|
|
134
138
|
```typescript
|
|
135
139
|
import { NgModule } from '@angular/core';
|
|
136
|
-
import { MAT_TIME_LOCALE } from
|
|
140
|
+
import { MAT_TIME_LOCALE } from '@dhutaryan/ngx-mat-timepicker';
|
|
137
141
|
|
|
138
142
|
@NgModule({
|
|
139
143
|
imports: [
|
|
140
144
|
// ...
|
|
141
145
|
],
|
|
142
|
-
providers: [{ provide: MAT_TIME_LOCALE, useValue:
|
|
146
|
+
providers: [{ provide: MAT_TIME_LOCALE, useValue: 'en-GB' }],
|
|
143
147
|
})
|
|
144
148
|
export class MyModule {}
|
|
145
149
|
```
|