@dhutaryan/ngx-mat-timepicker 20.2.0 → 22.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,8 @@ The timepicker module using Angular material.
|
|
|
11
11
|
|
|
12
12
|
| mat-timepicker | Angular |
|
|
13
13
|
| -------------- | ------------------- |
|
|
14
|
+
| 22.x.x | >=22.0.0 |
|
|
15
|
+
| 21.x.x | >=21.0.0 |
|
|
14
16
|
| 20.1.x | >=20.2.0 |
|
|
15
17
|
| 20.0.x | >=20.0.0 |
|
|
16
18
|
| 19.x.x | >=19.0.0 |
|
|
@@ -47,7 +49,7 @@ $ yarn add @dhutaryan/ngx-mat-timepicker
|
|
|
47
49
|
Import `MatTimepickerModule` to your project.
|
|
48
50
|
|
|
49
51
|
```typescript
|
|
50
|
-
import { MatTimepickerModule } from
|
|
52
|
+
import { MatTimepickerModule } from '@dhutaryan/ngx-mat-timepicker';
|
|
51
53
|
|
|
52
54
|
@NgModule({
|
|
53
55
|
imports: [
|
|
@@ -64,7 +66,10 @@ export class MyModule {}
|
|
|
64
66
|
Add a timepicker adapter.
|
|
65
67
|
|
|
66
68
|
```typescript
|
|
67
|
-
import {
|
|
69
|
+
import {
|
|
70
|
+
MatTimepickerModule,
|
|
71
|
+
provideNativeDateTimeAdapter,
|
|
72
|
+
} from '@dhutaryan/ngx-mat-timepicker';
|
|
68
73
|
|
|
69
74
|
@NgModule({
|
|
70
75
|
imports: [
|
|
@@ -72,7 +77,7 @@ import { MatTimepickerModule, provideNativeDateTimeAdapter } from "@dhutaryan/ng
|
|
|
72
77
|
MatTimepickerModule,
|
|
73
78
|
// ...
|
|
74
79
|
],
|
|
75
|
-
providers: [provideNativeDateTimeAdapter()]
|
|
80
|
+
providers: [provideNativeDateTimeAdapter()],
|
|
76
81
|
})
|
|
77
82
|
export class MyModule {}
|
|
78
83
|
```
|
|
@@ -80,7 +85,7 @@ export class MyModule {}
|
|
|
80
85
|
or create your own
|
|
81
86
|
|
|
82
87
|
```typescript
|
|
83
|
-
import { MatTimepickerModule } from
|
|
88
|
+
import { MatTimepickerModule } from '@dhutaryan/ngx-mat-timepicker';
|
|
84
89
|
|
|
85
90
|
@NgModule({
|
|
86
91
|
imports: [
|
|
@@ -98,7 +103,7 @@ export class MyModule {}
|
|
|
98
103
|
Then you have to define a theme. [More details about theming](https://material.angular.io/guide/theming).
|
|
99
104
|
|
|
100
105
|
```scss
|
|
101
|
-
@use
|
|
106
|
+
@use '@dhutaryan/ngx-mat-timepicker' as mat-timepicker;
|
|
102
107
|
|
|
103
108
|
// timepicker uses these component
|
|
104
109
|
@include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
|
|
@@ -112,7 +117,7 @@ Then you have to define a theme. [More details about theming](https://material.a
|
|
|
112
117
|
@include mat-timepicker.timepicker-theme($theme);
|
|
113
118
|
|
|
114
119
|
// if you want to support color attribute in M3 add compatibility mixin
|
|
115
|
-
@include mat.color-variants-backwards-compatibility($my-theme)
|
|
120
|
+
@include mat.color-variants-backwards-compatibility($my-theme);
|
|
116
121
|
```
|
|
117
122
|
|
|
118
123
|
You can also use `mat.theme` mixin instead.
|
|
@@ -133,13 +138,13 @@ Default locale is `en-US`. You can set your locale as:
|
|
|
133
138
|
|
|
134
139
|
```typescript
|
|
135
140
|
import { NgModule } from '@angular/core';
|
|
136
|
-
import { MAT_TIME_LOCALE } from
|
|
141
|
+
import { MAT_TIME_LOCALE } from '@dhutaryan/ngx-mat-timepicker';
|
|
137
142
|
|
|
138
143
|
@NgModule({
|
|
139
144
|
imports: [
|
|
140
145
|
// ...
|
|
141
146
|
],
|
|
142
|
-
providers: [{ provide: MAT_TIME_LOCALE, useValue:
|
|
147
|
+
providers: [{ provide: MAT_TIME_LOCALE, useValue: 'en-GB' }],
|
|
143
148
|
})
|
|
144
149
|
export class MyModule {}
|
|
145
150
|
```
|