@ngx-mce/datetime-picker 21.1.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/LICENSE +21 -0
- package/README.md +236 -0
- package/fesm2022/ngx-mce-datetime-picker.mjs +5533 -0
- package/fesm2022/ngx-mce-datetime-picker.mjs.map +1 -0
- package/package.json +61 -0
- package/types/ngx-mce-datetime-picker.d.ts +1947 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020 HO Hong Quan
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
# Angular Material DatetimePicker, Timepicker for @angular/material 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x, 18.x, 19.x, 20.x
|
|
2
|
+
|
|
3
|
+
[](https://travis-ci.com/h2qutc/angular-material-components)
|
|
4
|
+
[](https://www.npmjs.com/package/angular-material-components)
|
|
5
|
+
[](https://www.npmjs.com/package/@ngx-mce/datetime-picker)
|
|
6
|
+
[]()
|
|
7
|
+
|
|
8
|
+
## Description
|
|
9
|
+
|
|
10
|
+
A DatetimePicker like @angular/material
|
|
11
|
+
[Datepicker](https://material.angular.io/components/datepicker/overview) by adding support for
|
|
12
|
+
choosing time.
|
|
13
|
+
|
|
14
|
+
<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>
|
|
15
|
+
|
|
16
|
+
## DEMO
|
|
17
|
+
|
|
18
|
+
@see [LIVE DEMO AND DOCUMENTATION](https://h2qutc.github.io/angular-material-components/)
|
|
19
|
+
|
|
20
|
+
@see [DEMO stackblitz](https://stackblitz.com/edit/demo-ngx-mat-datetime-picker)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
Choose the version corresponding to your Angular version:
|
|
25
|
+
|
|
26
|
+
| Angular | @ngx-mce/datetime-picker |
|
|
27
|
+
| ------- | ------------------------------- |
|
|
28
|
+
| 20 | 20.x+ |
|
|
29
|
+
| 19 | 19.x+ |
|
|
30
|
+
| 18 | 18.x+ |
|
|
31
|
+
| 16 | 16.x+ |
|
|
32
|
+
| 15 | 15.x+ OR 9.x+ for legacy import |
|
|
33
|
+
| 14 | 8.x+ |
|
|
34
|
+
| 13 | 7.x+ |
|
|
35
|
+
| 12 | 6.x+ |
|
|
36
|
+
| 11 | 5.x+ |
|
|
37
|
+
| 10 | 4.x+ |
|
|
38
|
+
| 9 | 2.x+ |
|
|
39
|
+
| 8 | 2.x+ |
|
|
40
|
+
| 7 | 2.x+ |
|
|
41
|
+
|
|
42
|
+
## Getting started
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
npm install --save @ngx-mce/datetime-picker
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Setup
|
|
49
|
+
|
|
50
|
+
Add the date provider to your app configuration.
|
|
51
|
+
|
|
52
|
+
[!IMPORTANT] to prevent the \_ERROR Error: NgxMatDatetimePicker: No provider found for DateAdapter.
|
|
53
|
+
You must import one of the following providers at your application root or standalone component:
|
|
54
|
+
provideNativeDateAdapter, provideMomentDateAdapter, provideLuxonDateAdapter, provideDateFnsAdapter,
|
|
55
|
+
or provide a custom implementation.
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
import { provideNativeDateAdapter } from '@angular/material/core';
|
|
59
|
+
|
|
60
|
+
export const appConfig: ApplicationConfig = {
|
|
61
|
+
providers: [
|
|
62
|
+
...,
|
|
63
|
+
provideNativeDateAdapter(),
|
|
64
|
+
...,
|
|
65
|
+
],
|
|
66
|
+
};
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
On your component, you can use the datepicker as follows:
|
|
70
|
+
|
|
71
|
+
```typescript
|
|
72
|
+
import {
|
|
73
|
+
NgxMatDatepickerActions,
|
|
74
|
+
NgxMatDatepickerApply,
|
|
75
|
+
NgxMatDatepickerCancel,
|
|
76
|
+
NgxMatDatepickerClear,
|
|
77
|
+
NgxMatDatepickerInput,
|
|
78
|
+
NgxMatDatetimepicker,
|
|
79
|
+
} from '@ngx-mce/datetime-picker';
|
|
80
|
+
|
|
81
|
+
@Component({
|
|
82
|
+
selector: 'test',
|
|
83
|
+
imports: [
|
|
84
|
+
NgxMatDatepickerActions,
|
|
85
|
+
NgxMatDatepickerActions,
|
|
86
|
+
NgxMatDatepickerApply,
|
|
87
|
+
NgxMatDatepickerCancel,
|
|
88
|
+
NgxMatDatepickerClear,
|
|
89
|
+
NgxMatDatepickerInput,
|
|
90
|
+
NgxMatDatetimepicker,
|
|
91
|
+
..., // other imports
|
|
92
|
+
],
|
|
93
|
+
template: `
|
|
94
|
+
<input matInput [ngxMatDatetimePicker]="event" class="hidden" />
|
|
95
|
+
|
|
96
|
+
<ngx-mat-datetime-picker #event>
|
|
97
|
+
<ngx-mat-datepicker-actions>
|
|
98
|
+
<div class="flex w-full justify-between">
|
|
99
|
+
<button mat-button ngxMatDatepickerClear>Clear</button>
|
|
100
|
+
<div>
|
|
101
|
+
<button mat-button ngxMatDatepickerCancel>Cancel</button>
|
|
102
|
+
<button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</ngx-mat-datepicker-actions>
|
|
106
|
+
</ngx-mat-datetime-picker>
|
|
107
|
+
`,
|
|
108
|
+
})
|
|
109
|
+
export class TestComponent {}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
@see [src/app/demo-datetime/demo-datetime.module.ts](src/app/demo-datetime/demo-datetime.module.ts)
|
|
113
|
+
|
|
114
|
+
## Using the component The same API as @angular/material Datepicker (@see [API
|
|
115
|
+
|
|
116
|
+
docs](https://material.angular.io/components/datepicker/api)) ### Datetime Picker
|
|
117
|
+
(ngx-mat-datetime-picker)
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<mat-form-field>
|
|
121
|
+
<input
|
|
122
|
+
matInput
|
|
123
|
+
[ngxMatDatetimePicker]="picker"
|
|
124
|
+
placeholder="Choose a date"
|
|
125
|
+
[formControl]="dateControl"
|
|
126
|
+
[min]="minDate"
|
|
127
|
+
[max]="maxDate"
|
|
128
|
+
[disabled]="disabled" />
|
|
129
|
+
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
|
130
|
+
<ngx-mat-datetime-picker
|
|
131
|
+
#picker
|
|
132
|
+
[showSpinners]="showSpinners"
|
|
133
|
+
[showSeconds]="showSeconds"
|
|
134
|
+
[stepHour]="stepHour"
|
|
135
|
+
[stepMinute]="stepMinute"
|
|
136
|
+
[stepSecond]="stepSecond"
|
|
137
|
+
[touchUi]="touchUi"
|
|
138
|
+
[color]="color"
|
|
139
|
+
[enableMeridian]="enableMeridian"
|
|
140
|
+
[disableMinute]="disableMinute"
|
|
141
|
+
[hideTime]="hideTime">
|
|
142
|
+
</ngx-mat-datetime-picker>
|
|
143
|
+
</mat-form-field>
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Timepicker (ngx-mat-timepicker)
|
|
147
|
+
|
|
148
|
+
```
|
|
149
|
+
<ngx-mat-timepicker [(ngModel)]="date"></ngx-mat-timepicker>
|
|
150
|
+
<ngx-mat-timepicker [(ngModel)]="date" [disabled]="disabled"></ngx-mat-timepicker>
|
|
151
|
+
<ngx-mat-timepicker [(ngModel)]="date" [stepHour]="2" [stepMinute]="5" [stepSecond]="10"></ngx-mat-timepicker>
|
|
152
|
+
<ngx-mat-timepicker [(ngModel)]="date" [showSpinners]="showSpinners"></ngx-mat-timepicker>
|
|
153
|
+
<ngx-mat-timepicker [(ngModel)]="date" [showSeconds]="showSeconds"></ngx-mat-timepicker>
|
|
154
|
+
<ngx-mat-timepicker [(ngModel)]="date" [disableMinute]="disableMinute"></ngx-mat-timepicker>
|
|
155
|
+
<ngx-mat-timepicker [(ngModel)]="date" [defaultTime]="defaultTime"></ngx-mat-timepicker>
|
|
156
|
+
<ngx-mat-timepicker [formControl]="formControl"></ngx-mat-timepicker>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
#### List of @Input of ngx-mat-timepicker
|
|
160
|
+
|
|
161
|
+
_You can use all @Input of ngx-mat-timepicker for ngx-mat-datetime-picker_
|
|
162
|
+
|
|
163
|
+
| @Input | Type | Default value | Description |
|
|
164
|
+
| ------------------ | ------------ | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
165
|
+
| **disabled** | boolean | null | If true, the picker is readonly and can't be modified |
|
|
166
|
+
| **showSpinners** | boolean | true | If true, the spinners above and below input are visible |
|
|
167
|
+
| **showSeconds** | boolean | true | If true, it is not possible to select seconds |
|
|
168
|
+
| **disableMinute** | boolean | false | If true, the minute (and second) is readonly |
|
|
169
|
+
| **defaultTime** | Array | undefined | An array [hour, minute, second] for default time when the date is not yet defined |
|
|
170
|
+
| **stepHour** | number | 1 | The number of hours to add/substract when clicking hour spinners |
|
|
171
|
+
| **stepMinute** | number | 1 | The number of minutes to add/substract when clicking minute spinners |
|
|
172
|
+
| **stepSecond** | number | 1 | The number of seconds to add/substract when clicking second spinners |
|
|
173
|
+
| **color** | ThemePalette | undefined | Color palette to use on the datepicker's calendar. |
|
|
174
|
+
| **enableMeridian** | boolean | false | Whether to display 12H or 24H mode. |
|
|
175
|
+
| **hideTime** | boolean | false | If true, the time is hidden. |
|
|
176
|
+
| **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. |
|
|
177
|
+
|
|
178
|
+
## Choosing a date implementation and date format settings
|
|
179
|
+
|
|
180
|
+
[NativeDateAdapter](https://github.com/angular/components/blob/main/src/material/core/datetime/index.ts)
|
|
181
|
+
[DateFnsAdapter](https://github.com/angular/components/blob/main/src/material-date-fns-adapter/adapter/index.ts)
|
|
182
|
+
[LuxonDateAdapter](https://github.com/angular/components/blob/main/src/material-luxon-adapter/adapter/index.ts)
|
|
183
|
+
[MomentDateAdapter](https://github.com/angular/components/blob/main/src/material-moment-adapter/adapter/index.ts)
|
|
184
|
+
|
|
185
|
+
For example:
|
|
186
|
+
|
|
187
|
+
Creating a custom date adapter:
|
|
188
|
+
|
|
189
|
+
```
|
|
190
|
+
@Injectable()
|
|
191
|
+
export class CustomDateAdapter extends DateAdapter<D> {...}
|
|
192
|
+
// D can be Date, Moment or customized type
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
```
|
|
196
|
+
// If using Moment
|
|
197
|
+
const CUSTOM_DATE_FORMATS: MatDateFormats = {
|
|
198
|
+
parse: {
|
|
199
|
+
dateInput: "l, LTS"
|
|
200
|
+
},
|
|
201
|
+
display: {
|
|
202
|
+
dateInput: "l, LTS",
|
|
203
|
+
monthYearLabel: "MMM YYYY",
|
|
204
|
+
dateA11yLabel: "LL",
|
|
205
|
+
monthYearA11yLabel: "MMMM YYYY"
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
Creating a custom date adapter module
|
|
211
|
+
|
|
212
|
+
```
|
|
213
|
+
export function provideNgxMatCustomDate() {
|
|
214
|
+
return makeEnvironmentProviders([
|
|
215
|
+
{ provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_LOCALE] },
|
|
216
|
+
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
|
|
217
|
+
]);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
You can also customize the date format by providing your custom MAT_DATE_FORMATS in your module.
|
|
223
|
+
|
|
224
|
+
## Theming
|
|
225
|
+
|
|
226
|
+
- @see @angular/material
|
|
227
|
+
[Using a pre-built theme](https://material.angular.io/guide/theming#using-a-pre-built-theme)
|
|
228
|
+
- Add the Material Design icon font to your index.html
|
|
229
|
+
|
|
230
|
+
```
|
|
231
|
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
## License
|
|
235
|
+
|
|
236
|
+
MIT
|