@ngx-mce/datetime-picker 21.1.0 → 21.2.0-next.1
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 +240 -236
- package/fesm2022/ngx-mce-datetime-picker.mjs +1123 -887
- package/fesm2022/ngx-mce-datetime-picker.mjs.map +1 -1
- package/package.json +17 -22
- package/types/ngx-mce-datetime-picker.d.ts +120 -119
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -1,236 +1,240 @@
|
|
|
1
|
-
# Angular Material DatetimePicker
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
[](https://www.npmjs.com/package/
|
|
5
|
-
[](https://www.npmjs.com/package/@ngx-mce/datetime-picker)
|
|
6
|
-
[]()
|
|
7
|
-
|
|
8
|
-
## Description
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[Datepicker](https://material.angular.io/components/datepicker/overview)
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
##
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
(
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
[
|
|
133
|
-
[
|
|
134
|
-
[
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
[
|
|
139
|
-
[
|
|
140
|
-
[
|
|
141
|
-
[
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
<ngx-mat-timepicker [(ngModel)]="date"
|
|
156
|
-
<ngx-mat-timepicker [
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
|
170
|
-
|
|
|
171
|
-
| **
|
|
172
|
-
| **
|
|
173
|
-
| **
|
|
174
|
-
| **
|
|
175
|
-
| **
|
|
176
|
-
| **
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
//
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
1
|
+
# Angular Material DatetimePicker and Timepicker
|
|
2
|
+
## For Angular Material 21.x
|
|
3
|
+
|
|
4
|
+
[](https://www.npmjs.com/package/@ngx-mce/datetime-picker)
|
|
5
|
+
[](https://www.npmjs.com/package/@ngx-mce/datetime-picker)
|
|
6
|
+
[]()
|
|
7
|
+
|
|
8
|
+
## Description
|
|
9
|
+
|
|
10
|
+
These are Date and Time pickers for Angular Material projects. Specifically, this extends the @angular/material
|
|
11
|
+
[Datepicker](https://material.angular.io/components/datepicker/overview) to support choosing time.
|
|
12
|
+
|
|
13
|
+
<a href="https://buymeacoffee.com/fbf.prog64" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
|
|
14
|
+
|
|
15
|
+
# Version control
|
|
16
|
+
|
|
17
|
+
Choose the version corresponding to your Angular version:
|
|
18
|
+
|
|
19
|
+
| Angular | @ngx-mce/datetime-picker |
|
|
20
|
+
| -------- | -------------------------|
|
|
21
|
+
| 21 | 21.x |
|
|
22
|
+
| 15 -- 20 | Please use [GNURub's version](https://github.com/GNURub/angular-material-components) |
|
|
23
|
+
| 7 -- 14 | Please use [h2qutc's version](https://github.com/h2qutc/angular-material-components) |
|
|
24
|
+
|
|
25
|
+
# Date and Time pickers in action
|
|
26
|
+
|
|
27
|
+
See demo:
|
|
28
|
+
|
|
29
|
+
* Over [StackBlitz](https://stackblitz.com/edit/demo-ngx-mat-datetime-picker).
|
|
30
|
+
* In the [documentation](https://fbf-prog64.github.io/angular-material-components/).
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
# How to use
|
|
35
|
+
|
|
36
|
+
## Install
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
npm install --save @ngx-mce/datetime-picker
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Configure
|
|
43
|
+
|
|
44
|
+
Add the date provider of your choice to your app configuration, either in your application root or in your standalone component.
|
|
45
|
+
|
|
46
|
+
The following providers are available:
|
|
47
|
+
|
|
48
|
+
* `provideNativeDateAdapter`, based on native JS.
|
|
49
|
+
* `provideMomentDateAdapter`, based on Moment.js.
|
|
50
|
+
* `provideLuxonDateAdapter`, based on Luxon.
|
|
51
|
+
* `provideDateFnsAdapter`, based on date.fns.
|
|
52
|
+
* You may also provide a custom implementation.
|
|
53
|
+
|
|
54
|
+
This step is important to prevent the following error:
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
Error: NgxMatDatetimePicker: No provider found for DateAdapter.
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
import { provideNativeDateAdapter } from '@angular/material/core';
|
|
62
|
+
|
|
63
|
+
export const appConfig: ApplicationConfig = {
|
|
64
|
+
providers: [
|
|
65
|
+
...,
|
|
66
|
+
provideNativeDateAdapter(),
|
|
67
|
+
...,
|
|
68
|
+
],
|
|
69
|
+
};
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Using the component
|
|
73
|
+
|
|
74
|
+
On your component, you can use the datepicker as follows:
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
import {
|
|
78
|
+
NgxMatDatepickerActions,
|
|
79
|
+
NgxMatDatepickerApply,
|
|
80
|
+
NgxMatDatepickerCancel,
|
|
81
|
+
NgxMatDatepickerClear,
|
|
82
|
+
NgxMatDatepickerInput,
|
|
83
|
+
NgxMatDatetimepicker,
|
|
84
|
+
} from '@ngx-mce/datetime-picker';
|
|
85
|
+
|
|
86
|
+
@Component({
|
|
87
|
+
selector: 'test',
|
|
88
|
+
imports: [
|
|
89
|
+
NgxMatDatepickerActions,
|
|
90
|
+
NgxMatDatepickerActions,
|
|
91
|
+
NgxMatDatepickerApply,
|
|
92
|
+
NgxMatDatepickerCancel,
|
|
93
|
+
NgxMatDatepickerClear,
|
|
94
|
+
NgxMatDatepickerInput,
|
|
95
|
+
NgxMatDatetimepicker,
|
|
96
|
+
..., // other imports
|
|
97
|
+
],
|
|
98
|
+
template: `
|
|
99
|
+
<input matInput [ngxMatDatetimePicker]="event" class="hidden" />
|
|
100
|
+
|
|
101
|
+
<ngx-mat-datetime-picker #event>
|
|
102
|
+
<ngx-mat-datepicker-actions>
|
|
103
|
+
<div class="flex w-full justify-between">
|
|
104
|
+
<button mat-button ngxMatDatepickerClear>Clear</button>
|
|
105
|
+
<div>
|
|
106
|
+
<button mat-button ngxMatDatepickerCancel>Cancel</button>
|
|
107
|
+
<button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
</ngx-mat-datepicker-actions>
|
|
111
|
+
</ngx-mat-datetime-picker>
|
|
112
|
+
`,
|
|
113
|
+
})
|
|
114
|
+
export class TestComponent {}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Check out the demo source code [here](src/app/demo-datetime/demo-datetime.module.ts).
|
|
118
|
+
|
|
119
|
+
### Markup
|
|
120
|
+
|
|
121
|
+
The template uses the same API as @angular/material Datepicker (see [API docs](https://material.angular.io/components/datepicker/api))
|
|
122
|
+
|
|
123
|
+
### Datetime Picker (ngx-mat-datetime-picker)
|
|
124
|
+
|
|
125
|
+
```html
|
|
126
|
+
<mat-form-field>
|
|
127
|
+
<input
|
|
128
|
+
matInput
|
|
129
|
+
[ngxMatDatetimePicker]="picker"
|
|
130
|
+
placeholder="Choose a date"
|
|
131
|
+
[formControl]="dateControl"
|
|
132
|
+
[min]="minDate"
|
|
133
|
+
[max]="maxDate"
|
|
134
|
+
[disabled]="disabled" />
|
|
135
|
+
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
|
136
|
+
<ngx-mat-datetime-picker
|
|
137
|
+
#picker
|
|
138
|
+
[showSpinners]="showSpinners"
|
|
139
|
+
[showSeconds]="showSeconds"
|
|
140
|
+
[stepHour]="stepHour"
|
|
141
|
+
[stepMinute]="stepMinute"
|
|
142
|
+
[stepSecond]="stepSecond"
|
|
143
|
+
[touchUi]="touchUi"
|
|
144
|
+
[color]="color"
|
|
145
|
+
[enableMeridian]="enableMeridian"
|
|
146
|
+
[disableMinute]="disableMinute"
|
|
147
|
+
[hideTime]="hideTime">
|
|
148
|
+
</ngx-mat-datetime-picker>
|
|
149
|
+
</mat-form-field>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### Timepicker (ngx-mat-timepicker)
|
|
153
|
+
|
|
154
|
+
```
|
|
155
|
+
<ngx-mat-timepicker [(ngModel)]="date"></ngx-mat-timepicker>
|
|
156
|
+
<ngx-mat-timepicker [(ngModel)]="date" [disabled]="disabled"></ngx-mat-timepicker>
|
|
157
|
+
<ngx-mat-timepicker [(ngModel)]="date" [stepHour]="2" [stepMinute]="5" [stepSecond]="10"></ngx-mat-timepicker>
|
|
158
|
+
<ngx-mat-timepicker [(ngModel)]="date" [showSpinners]="showSpinners"></ngx-mat-timepicker>
|
|
159
|
+
<ngx-mat-timepicker [(ngModel)]="date" [showSeconds]="showSeconds"></ngx-mat-timepicker>
|
|
160
|
+
<ngx-mat-timepicker [(ngModel)]="date" [disableMinute]="disableMinute"></ngx-mat-timepicker>
|
|
161
|
+
<ngx-mat-timepicker [(ngModel)]="date" [defaultTime]="defaultTime"></ngx-mat-timepicker>
|
|
162
|
+
<ngx-mat-timepicker [formControl]="formControl"></ngx-mat-timepicker>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
## List of @Input of ngx-mat-timepicker
|
|
166
|
+
|
|
167
|
+
_These properties are also available in ngx-mat-datetime-picker._
|
|
168
|
+
|
|
169
|
+
| @Input | Type | Default value | Description |
|
|
170
|
+
| ------------------ | ------------ | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
171
|
+
| **disabled** | boolean | null | If true, the picker is readonly and can't be modified |
|
|
172
|
+
| **showSpinners** | boolean | true | If true, the spinners above and below input are visible |
|
|
173
|
+
| **showSeconds** | boolean | true | If true, it is not possible to select seconds |
|
|
174
|
+
| **disableMinute** | boolean | false | If true, the minute (and second) is readonly |
|
|
175
|
+
| **defaultTime** | Array | undefined | An array [hour, minute, second] for default time when the date is not yet defined |
|
|
176
|
+
| **stepHour** | number | 1 | The number of hours to add/substract when clicking hour spinners |
|
|
177
|
+
| **stepMinute** | number | 1 | The number of minutes to add/substract when clicking minute spinners |
|
|
178
|
+
| **stepSecond** | number | 1 | The number of seconds to add/substract when clicking second spinners |
|
|
179
|
+
| **color** | ThemePalette | undefined | Color palette to use on the datepicker's calendar. |
|
|
180
|
+
| **enableMeridian** | boolean | false | Whether to display 12H or 24H mode. |
|
|
181
|
+
| **hideTime** | boolean | false | If true, the time is hidden. |
|
|
182
|
+
| **touchUi** | boolean | false | Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets. |
|
|
183
|
+
|
|
184
|
+
## Choosing the best date provider and format settings
|
|
185
|
+
|
|
186
|
+
* [NativeDateAdapter](https://github.com/angular/components/blob/main/src/material/core/datetime/index.ts)
|
|
187
|
+
* [DateFnsAdapter](https://github.com/angular/components/blob/main/src/material-date-fns-adapter/adapter/index.ts)
|
|
188
|
+
* [LuxonDateAdapter](https://github.com/angular/components/blob/main/src/material-luxon-adapter/adapter/index.ts)
|
|
189
|
+
* [MomentDateAdapter](https://github.com/angular/components/blob/main/src/material-moment-adapter/adapter/index.ts)
|
|
190
|
+
|
|
191
|
+
Examples of using a custom adapter are provided below.
|
|
192
|
+
|
|
193
|
+
```
|
|
194
|
+
@Injectable()
|
|
195
|
+
export class CustomDateAdapter extends DateAdapter<D> {...}
|
|
196
|
+
// D can be Date, Moment or customized type
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
```
|
|
200
|
+
// If using Moment
|
|
201
|
+
const CUSTOM_DATE_FORMATS: MatDateFormats = {
|
|
202
|
+
parse: {
|
|
203
|
+
dateInput: "l, LTS"
|
|
204
|
+
},
|
|
205
|
+
display: {
|
|
206
|
+
dateInput: "l, LTS",
|
|
207
|
+
monthYearLabel: "MMM YYYY",
|
|
208
|
+
dateA11yLabel: "LL",
|
|
209
|
+
monthYearA11yLabel: "MMMM YYYY"
|
|
210
|
+
}
|
|
211
|
+
};
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
Providing the custom adapter in the Module.
|
|
215
|
+
|
|
216
|
+
```
|
|
217
|
+
export function provideNgxMatCustomDate() {
|
|
218
|
+
return makeEnvironmentProviders([
|
|
219
|
+
{ provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_LOCALE] },
|
|
220
|
+
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
|
|
221
|
+
]);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
You can also customize the date format by providing your custom `MAT_DATE_FORMATS` in your module.
|
|
227
|
+
|
|
228
|
+
## Theming
|
|
229
|
+
|
|
230
|
+
- @see @angular/material
|
|
231
|
+
[Using a pre-built theme](https://material.angular.io/guide/theming#using-a-pre-built-theme)
|
|
232
|
+
- Add the Material Design icon font to your index.html
|
|
233
|
+
|
|
234
|
+
```
|
|
235
|
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
## License
|
|
239
|
+
|
|
240
|
+
MIT
|