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