nxt-pick-datetime 13.0.1 → 15.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 +130 -147
- package/assets/picker.scss +88 -93
- package/esm2020/lib/class/date-time-adapter.class.mjs +8 -8
- package/esm2020/lib/class/date-time-format.class.mjs +2 -2
- package/esm2020/lib/class/date-time.class.mjs +54 -71
- package/esm2020/lib/class/dialog-config.class.mjs +3 -13
- package/esm2020/lib/class/dialog-ref.class.mjs +9 -10
- package/esm2020/lib/date-time/calendar/calendar.component.mjs +89 -94
- package/esm2020/lib/date-time/calendar-body/calendar-body.component.mjs +32 -28
- package/esm2020/lib/date-time/calendar-month-view/calendar-month-view.component.mjs +71 -80
- package/esm2020/lib/date-time/calendar-multi-year-view/calendar-multi-year-view.component.mjs +57 -63
- package/esm2020/lib/date-time/calendar-year-view/calendar-year-view.component.mjs +57 -68
- package/esm2020/lib/date-time/date-time-inline/date-time-inline.component.mjs +68 -78
- package/esm2020/lib/date-time/date-time-picker/date-time-picker.component.mjs +164 -182
- package/esm2020/lib/date-time/date-time-picker-container/date-time-picker-container.animations.mjs +2 -2
- package/esm2020/lib/date-time/date-time-picker-container/date-time-picker-container.component.mjs +109 -117
- package/esm2020/lib/date-time/date-time-picker-input.directive.mjs +185 -203
- package/esm2020/lib/date-time/date-time-picker-intl.service.mjs +5 -5
- package/esm2020/lib/date-time/date-time-picker-trigger.directive.mjs +20 -19
- package/esm2020/lib/date-time/date-time.module.mjs +79 -71
- package/esm2020/lib/date-time/number-fixed-len.pipe.mjs +9 -13
- package/esm2020/lib/date-time/timer/timer.component.mjs +64 -59
- package/esm2020/lib/date-time/timer-box/timer-box.component.mjs +22 -17
- package/esm2020/lib/dialog/dialog-container/dialog-container.component.mjs +44 -49
- package/esm2020/lib/dialog/dialog.module.mjs +26 -19
- package/esm2020/lib/dialog/dialog.service.mjs +52 -49
- package/esm2020/lib/utils/object.mjs +3 -3
- package/esm2020/moment-adapter/date-time-adapter.class.mjs +17 -16
- package/esm2020/moment-adapter/date-time-format.class.mjs +2 -2
- package/esm2020/moment-adapter/moment-adapter.module.mjs +18 -22
- package/esm2020/moment-adapter/nxt-pick-datetime-moment-adapter.mjs +1 -1
- package/esm2020/moment-adapter/public-api.mjs +2 -2
- package/esm2020/native-adapter/date-time-adapter.class.mjs +13 -13
- package/esm2020/native-adapter/date-time-format.class.mjs +2 -2
- package/esm2020/native-adapter/native-adapter.module.mjs +24 -22
- package/esm2020/native-adapter/nxt-pick-datetime-native-adapter.mjs +1 -1
- package/esm2020/native-adapter/public-api.mjs +2 -2
- package/esm2020/nxt-pick-datetime.mjs +1 -1
- package/esm2020/public-api.mjs +14 -14
- package/fesm2015/nxt-pick-datetime-moment-adapter.mjs +33 -35
- package/fesm2015/nxt-pick-datetime-moment-adapter.mjs.map +1 -1
- package/fesm2015/nxt-pick-datetime-native-adapter.mjs +36 -33
- package/fesm2015/nxt-pick-datetime-native-adapter.mjs.map +1 -1
- package/fesm2015/nxt-pick-datetime.mjs +1234 -1257
- package/fesm2015/nxt-pick-datetime.mjs.map +1 -1
- package/fesm2020/nxt-pick-datetime-moment-adapter.mjs +33 -35
- package/fesm2020/nxt-pick-datetime-moment-adapter.mjs.map +1 -1
- package/fesm2020/nxt-pick-datetime-native-adapter.mjs +36 -33
- package/fesm2020/nxt-pick-datetime-native-adapter.mjs.map +1 -1
- package/fesm2020/nxt-pick-datetime.mjs +1164 -1247
- package/fesm2020/nxt-pick-datetime.mjs.map +1 -1
- package/lib/class/date-time-adapter.class.d.ts +31 -31
- package/lib/class/date-time-format.class.d.ts +2 -2
- package/lib/class/date-time.class.d.ts +24 -23
- package/lib/class/dialog-config.class.d.ts +5 -5
- package/lib/class/dialog-ref.class.d.ts +16 -17
- package/lib/date-time/calendar/calendar.component.d.ts +41 -41
- package/lib/date-time/calendar-body/calendar-body.component.d.ts +11 -11
- package/lib/date-time/calendar-month-view/calendar-month-view.component.d.ts +40 -40
- package/lib/date-time/calendar-multi-year-view/calendar-multi-year-view.component.d.ts +38 -38
- package/lib/date-time/calendar-year-view/calendar-year-view.component.d.ts +36 -36
- package/lib/date-time/date-time-inline/date-time-inline.component.d.ts +38 -40
- package/lib/date-time/date-time-picker/date-time-picker.component.d.ts +51 -53
- package/lib/date-time/date-time-picker-container/date-time-picker-container.animations.d.ts +1 -1
- package/lib/date-time/date-time-picker-container/date-time-picker-container.component.d.ts +38 -39
- package/lib/date-time/date-time-picker-input.directive.d.ts +59 -53
- package/lib/date-time/date-time-picker-intl.service.d.ts +3 -3
- package/lib/date-time/date-time-picker-trigger.directive.d.ts +9 -9
- package/lib/date-time/date-time.module.d.ts +4 -4
- package/lib/date-time/number-fixed-len.pipe.d.ts +2 -2
- package/lib/date-time/timer/timer.component.d.ts +22 -22
- package/lib/date-time/timer-box/timer-box.component.d.ts +10 -10
- package/lib/dialog/dialog-container/dialog-container.component.d.ts +28 -24
- package/lib/dialog/dialog.module.d.ts +4 -4
- package/lib/dialog/dialog.service.d.ts +28 -28
- package/moment-adapter/date-time-adapter.class.d.ts +9 -9
- package/moment-adapter/date-time-format.class.d.ts +2 -2
- package/moment-adapter/moment-adapter.module.d.ts +0 -5
- package/moment-adapter/public-api.d.ts +1 -1
- package/native-adapter/date-time-adapter.class.d.ts +6 -6
- package/native-adapter/date-time-format.class.d.ts +2 -2
- package/native-adapter/native-adapter.module.d.ts +0 -5
- package/native-adapter/public-api.d.ts +1 -1
- package/package.json +17 -15
- package/public-api.d.ts +13 -13
- package/moment-adapter/package.json +0 -10
- package/native-adapter/package.json +0 -10
- /package/{nxt-pick-datetime.d.ts → index.d.ts} +0 -0
- /package/moment-adapter/{nxt-pick-datetime-moment-adapter.d.ts → index.d.ts} +0 -0
- /package/native-adapter/{nxt-pick-datetime-native-adapter.d.ts → index.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
Angular Date Time Picker
|
|
2
|
-
========================
|
|
1
|
+
# Angular Date Time Picker
|
|
3
2
|
|
|
4
3
|
[](https://www.npmjs.com/package/nxt-pick-datetime)
|
|
5
4
|
[](https://www.npmjs.com/package/nxt-pick-datetime)
|
|
@@ -7,49 +6,44 @@ Angular Date Time Picker
|
|
|
7
6
|
**Angular date time picker - Angular reusable UI component**
|
|
8
7
|
**This package supports Angular 9**
|
|
9
8
|
|
|
10
|
-
Breaking Changes
|
|
11
|
-
-------
|
|
12
|
-
- The picker has been updated for Angular 9+ apps.
|
|
9
|
+
## Breaking Changes
|
|
13
10
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
- The picker has been updated for Angular 9+ apps.
|
|
12
|
+
|
|
13
|
+
## Description
|
|
14
|
+
|
|
15
|
+
Simple Angular date time picker. Online doc is [here](https://daniel-projects.firebaseapp.com/nxtng/date-time-picker), Online demo is [here](https://liquid-js.github.io/nxt-components/pick-datetime).
|
|
17
16
|
This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices.
|
|
18
17
|
|
|
19
|
-
How to Use
|
|
20
|
-
-------
|
|
18
|
+
## How to Use
|
|
21
19
|
|
|
22
|
-
1.
|
|
23
|
-
2.
|
|
20
|
+
1. Install with [npm](https://www.npmjs.com): `npm install nxt-pick-datetime --save`
|
|
21
|
+
2. Add styles.
|
|
24
22
|
|
|
25
23
|
If you are using Angular CLI, you can add this to `angular.json` :
|
|
26
24
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
``` js
|
|
25
|
+
```js
|
|
30
26
|
"styles": [
|
|
31
27
|
...,
|
|
32
|
-
"
|
|
28
|
+
"nxt-pick-datetime/assets/picker.scss"
|
|
33
29
|
]
|
|
34
30
|
```
|
|
35
31
|
|
|
36
|
-
3.
|
|
32
|
+
3. Add **DateTimeModule** and **NativeDateTimeModule** to your **@NgModule** like example below
|
|
37
33
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
``` typescript
|
|
34
|
+
```typescript
|
|
41
35
|
import { NgModule } from '@angular/core';
|
|
42
36
|
import { BrowserModule } from '@angular/platform-browser';
|
|
43
37
|
import { MyTestApp } from './my-test-app';
|
|
44
38
|
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
39
|
+
import { DateTimeModule } from 'nxt-pick-datetime';
|
|
40
|
+
import { NativeDateTimeModule } from 'nxt-pick-datetime/native-adapter';
|
|
47
41
|
|
|
48
42
|
@NgModule({
|
|
49
43
|
imports: [
|
|
50
44
|
BrowserModule,
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
DateTimeModule,
|
|
46
|
+
NativeDateTimeModule,
|
|
53
47
|
],
|
|
54
48
|
declarations: [ MyTestApp ],
|
|
55
49
|
bootstrap: [ MyTestApp ]
|
|
@@ -57,38 +51,30 @@ import { OwlNativeDateTimeModule } from 'nxt-pick-datetime/native-adapter';
|
|
|
57
51
|
export class MyTestAppModule {}
|
|
58
52
|
```
|
|
59
53
|
|
|
60
|
-
4.
|
|
61
|
-
|
|
62
|
-
|
|
54
|
+
4. Connecting a picker to an input and a trigger.
|
|
63
55
|
|
|
64
|
-
```
|
|
65
|
-
<input [
|
|
66
|
-
<
|
|
56
|
+
```html
|
|
57
|
+
<input [nxtDateTime]="dt1" [nxtDateTimeTrigger]="dt1" placeholder="Date Time">
|
|
58
|
+
<nxt-date-time #dt1></nxt-date-time>
|
|
67
59
|
```
|
|
68
60
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
<span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
|
|
74
|
-
<owl-date-time #dt2></owl-date-time>
|
|
61
|
+
```html
|
|
62
|
+
<input [nxtDateTime]="dt2" placeholder="Date Time">
|
|
63
|
+
<span [nxtDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
|
|
64
|
+
<nxt-date-time #dt2></nxt-date-time>
|
|
75
65
|
```
|
|
76
66
|
|
|
77
67
|
The examples above are quite basic. The picker has much more features,
|
|
78
|
-
and you could learn more about those from [demo page](https://
|
|
68
|
+
and you could learn more about those from [demo page](https://liquid-js.github.io/nxt-components/pick-datetime).
|
|
79
69
|
|
|
80
|
-
|
|
70
|
+
## Animation
|
|
81
71
|
|
|
82
|
-
Animation
|
|
83
|
-
-------
|
|
84
72
|
This picker uses angular animations to improve the user experience,
|
|
85
73
|
therefore you need to install `@angular/animations` and import `BrowserAnimationsModule` to your application.
|
|
86
74
|
|
|
87
|
-
|
|
88
|
-
npm install @angular/animations --save
|
|
89
|
-
```
|
|
75
|
+
npm install @angular/animations --save
|
|
90
76
|
|
|
91
|
-
```
|
|
77
|
+
```typescript
|
|
92
78
|
import {BrowserModule} from '@angular/platform-browser';
|
|
93
79
|
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
|
94
80
|
|
|
@@ -105,117 +91,114 @@ export class YourAppModule { }
|
|
|
105
91
|
|
|
106
92
|
If you prefer to disable animation effect, use `NoopAnimationsModule` instead.
|
|
107
93
|
|
|
108
|
-
Choose a date implementation
|
|
109
|
-
|
|
94
|
+
## Choose a date implementation
|
|
95
|
+
|
|
110
96
|
The date-time picker was built to be date implementation agnostic.
|
|
111
97
|
Developers need to make sure to provide the appropriate pieces for the picker to work with their chosen implementation.
|
|
112
98
|
There are two pre-made modules, users need to import one of them or build your own one (learn more about this from [here](https://danielykpan.github.io/date-time-picker/#locale-formats)).
|
|
113
99
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
Properties for `
|
|
118
|
-
|
|
119
|
-
|Name|Type|Required|Default|Description|
|
|
120
|
-
|
|
121
|
-
| `pickerType`
|
|
122
|
-
| `pickerMode`
|
|
123
|
-
| `startView`
|
|
124
|
-
| `startAt`
|
|
125
|
-
| `firstDayOfWeek`
|
|
126
|
-
| `showSecondsTimer` |boolean|Optional| `false`
|
|
127
|
-
| `hideOtherMonths`
|
|
128
|
-
| `hour12Timer`
|
|
129
|
-
| `stepHour`
|
|
130
|
-
| `stepMinute`
|
|
131
|
-
| `stepSecond`
|
|
132
|
-
| `scrollStrategy`
|
|
133
|
-
| `disabled`
|
|
134
|
-
| `backdropClass`
|
|
135
|
-
| `panelClass`
|
|
136
|
-
|
|
137
|
-
Events for `
|
|
138
|
-
|
|
139
|
-
|Events|Parameter|Description|
|
|
140
|
-
|
|
141
|
-
| `afterPickerOpen` |
|
|
142
|
-
| `afterPickerClosed` |
|
|
143
|
-
| `yearSelected`
|
|
144
|
-
| `monthSelected`
|
|
145
|
-
|
|
146
|
-
Properties for `input[
|
|
147
|
-
|
|
148
|
-
|Name|Type|Required|Default|Description|
|
|
149
|
-
|
|
150
|
-
| `
|
|
151
|
-
| `
|
|
152
|
-
| `disabled`
|
|
153
|
-
| `min`
|
|
154
|
-
| `max`
|
|
155
|
-
| `selectMode`
|
|
156
|
-
| `rangeSeparator` |string|Optional| `~`
|
|
157
|
-
|
|
158
|
-
Events for `input[
|
|
159
|
-
|
|
160
|
-
|Events|Parameter|Description|
|
|
161
|
-
|
|
162
|
-
| `dateTimeChange` |source:
|
|
163
|
-
| `dateTimeInput`
|
|
164
|
-
|
|
165
|
-
Properties for `[
|
|
166
|
-
|
|
167
|
-
|Name|Type|Required|Default|Description|
|
|
168
|
-
|
|
169
|
-
| `
|
|
170
|
-
| `disabled`
|
|
171
|
-
|
|
172
|
-
Properties for `[
|
|
173
|
-
|
|
174
|
-
|Name|Type|Required|Default|Description|
|
|
175
|
-
|
|
176
|
-
| `
|
|
177
|
-
| `disabled`
|
|
178
|
-
|
|
179
|
-
Properties for `
|
|
180
|
-
|
|
181
|
-
|Name|Type|Required|Default|Description|
|
|
182
|
-
|
|
183
|
-
| `pickerType`
|
|
184
|
-
| `startView`
|
|
185
|
-
| `startAt`
|
|
186
|
-
| `firstDayOfWeek`
|
|
187
|
-
| `showSecondsTimer` |boolean|Optional| `false`
|
|
188
|
-
| `hideOtherMonths`
|
|
189
|
-
| `hour12Timer`
|
|
190
|
-
| `stepHour`
|
|
191
|
-
| `stepMinute`
|
|
192
|
-
| `stepSecond`
|
|
193
|
-
| `disabled`
|
|
194
|
-
| `
|
|
195
|
-
| `min`
|
|
196
|
-
| `max`
|
|
197
|
-
| `selectMode`
|
|
198
|
-
|
|
199
|
-
Localization and DateTime Format
|
|
200
|
-
|
|
201
|
-
Localization for different languages and formats is defined by `
|
|
202
|
-
|
|
203
|
-
Dependencies
|
|
204
|
-
|
|
100
|
+
- `NativeDateTimeModule` - support for native JavaScript Date object
|
|
101
|
+
- `MomentDateTimeModule` - support for MomentJs
|
|
102
|
+
|
|
103
|
+
## Properties for `nxt-date-time`
|
|
104
|
+
|
|
105
|
+
| Name | Type | Required | Default | Description |
|
|
106
|
+
| :----------------- | :------------------------------ | :------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
107
|
+
| `pickerType` | `both` , `calendar` , `timer` | Optional | `both` | Set the type of the dateTime picker. `both` : show both calendar and timer, `calendar` : only show calendar, `timer` : only show timer. |
|
|
108
|
+
| `pickerMode` | `popup` , `dialog` | Optional | `popup` | The style the picker would open as. |
|
|
109
|
+
| `startView` | `month` , `year` , `multi-year` | Optional | `month` | The view that the calendar should start in. |
|
|
110
|
+
| `startAt` | T/undefined | Optional | `undefined` | The moment to open the picker to initially. |
|
|
111
|
+
| `firstDayOfWeek` | number | Optional | `0` | Set the first day of week. Valid value is from 0 to 6.0: Sunday ~ 6: Saturday |
|
|
112
|
+
| `showSecondsTimer` | boolean | Optional | `false` | When specify it to true, it would show a timer to configure the second's value |
|
|
113
|
+
| `hideOtherMonths` | boolean | Optional | `false` | Whether to hide dates in other months at the start or end of the current month |
|
|
114
|
+
| `hour12Timer` | boolean | Optional | `false` | When specify it to true, the timer would be in hour12 format mode |
|
|
115
|
+
| `stepHour` | number | Optional | `1` | Hours to change per step. |
|
|
116
|
+
| `stepMinute` | number | Optional | `1` | Minutes to change per step. |
|
|
117
|
+
| `stepSecond` | number | Optional | `1` | Seconds to change per step. |
|
|
118
|
+
| `scrollStrategy` | ScrollStrategy | Optional | `BlockScrollStrategy` | Define the scroll strategy when the picker is open. Learn more this from <https://material.angular.io/cdk/overlay/overview#scroll-strategies>. |
|
|
119
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the picker. |
|
|
120
|
+
| `backdropClass` | string/string\[] | Optional | `undefined` | Custom class for the picker backdrop. |
|
|
121
|
+
| `panelClass` | string/string\[] | Optional | `undefined` | Custom class for the picker overlay panel. |
|
|
122
|
+
|
|
123
|
+
## Events for `nxt-date-time`
|
|
124
|
+
|
|
125
|
+
| Events | Parameter | Description |
|
|
126
|
+
| :------------------ | :-------- | :----------------------------------------------------------------------------------------------- |
|
|
127
|
+
| `afterPickerOpen` | void | Callback to invoke when the picker is opened |
|
|
128
|
+
| `afterPickerClosed` | void | Callback to invoke when the picker is closed. |
|
|
129
|
+
| `yearSelected` | T | Callback to invoke when the year is selected. This doesn't imply a change on the selected date. |
|
|
130
|
+
| `monthSelected` | T | Callback to invoke when the month is selected. This doesn't imply a change on the selected date. |
|
|
131
|
+
|
|
132
|
+
## Properties for `input[nxtDateTime]`
|
|
133
|
+
|
|
134
|
+
| Name | Type | Required | Default | Description |
|
|
135
|
+
| :--------------- | :------------------------------------------- | :------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
136
|
+
| `nxtDateTime` | `DateTimeComponent<T>` | Require | `undefined` | The date time picker that this input is associated with. |
|
|
137
|
+
| `dateTimeFilter` | `( date: T)=>boolean ` | Optional | `undefined` | A function to filter date time. |
|
|
138
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the picker's input. |
|
|
139
|
+
| `min` | `<T>` | Optional | `undefined` | The minimum valid date time. |
|
|
140
|
+
| `max` | `<T>` | Optional | `undefined` | The maximum valid date time. |
|
|
141
|
+
| `selectMode` | `single` , `range` , `rangeFrom` , `rangeTo` | Optional | `single` | Specify the picker's select mode. `single` : a single value allowed, `range` : allow users to select a range of date-time, `rangeFrom` : the input would only show the 'from' value and the picker could only selects 'from' value, `rangeTo` : the input would only show the 'to' value and the picker could only selects 'to' value. |
|
|
142
|
+
| `rangeSeparator` | string | Optional | `~` | The character to separate the 'from' and 'to' in input value in range selectMode. |
|
|
143
|
+
|
|
144
|
+
## Events for `input[nxtDateTime]`
|
|
145
|
+
|
|
146
|
+
| Events | Parameter | Description |
|
|
147
|
+
| :--------------- | :------------------------------------------------------------------ | :---------------------------------------------------------------------------------- |
|
|
148
|
+
| `dateTimeChange` | source: DateTimeInput, value: input value, input: the input element | Callback to invoke when `change` event is fired on this `<input [nxtDateTime]>` |
|
|
149
|
+
| `dateTimeInput` | source: DateTimeInput, value: input value, input: the input element | Callback to invoke when an `input` event is fired on this `<input [nxtDateTime]>` . |
|
|
150
|
+
|
|
151
|
+
## Properties for `[nxtDateTimeTrigger]`
|
|
152
|
+
|
|
153
|
+
| Name | Type | Required | Default | Description |
|
|
154
|
+
| :------------------- | :--------------------- | :------- | :---------- | :--------------------------------------------------------- |
|
|
155
|
+
| `nxtDateTimeTrigger` | `DateTimeComponent<T>` | Require | `undefined` | The date time picker that this trigger is associated with. |
|
|
156
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the trigger. |
|
|
157
|
+
|
|
158
|
+
## Properties for `[nxtDateTimeTrigger]`
|
|
159
|
+
|
|
160
|
+
| Name | Type | Required | Default | Description |
|
|
161
|
+
| :------------------- | :--------------------- | :------- | :---------- | :--------------------------------------------------------- |
|
|
162
|
+
| `nxtDateTimeTrigger` | `DateTimeComponent<T>` | Require | `undefined` | The date time picker that this trigger is associated with. |
|
|
163
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the trigger. |
|
|
164
|
+
|
|
165
|
+
## Properties for `nxt-date-time-inline`
|
|
166
|
+
|
|
167
|
+
| Name | Type | Required | Default | Description |
|
|
168
|
+
| :----------------- | :------------------------------------------- | :------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
169
|
+
| `pickerType` | `both` , `calendar` , `timer` | Optional | `both` | Set the type of the dateTime picker. `both` : show both calendar and timer, `calendar` : only show calendar, `timer` : only show timer. |
|
|
170
|
+
| `startView` | `month` , `year` , `multi-year` | Optional | `month` | The view that the calendar should start in. |
|
|
171
|
+
| `startAt` | T/undefined | Optional | `undefined` | The moment to open the picker to initially. |
|
|
172
|
+
| `firstDayOfWeek` | number | Optional | `0` | Set the first day of week. Valid value is from 0 to 6.0: Sunday ~ 6: Saturday |
|
|
173
|
+
| `showSecondsTimer` | boolean | Optional | `false` | When specify it to true, it would show a timer to configure the second's value |
|
|
174
|
+
| `hideOtherMonths` | boolean | Optional | `false` | Whether to hide dates in other months at the start or end of the current month |
|
|
175
|
+
| `hour12Timer` | boolean | Optional | `false` | When specify it to true, the timer would be in hour12 format mode |
|
|
176
|
+
| `stepHour` | number | Optional | `1` | Hours to change per step. |
|
|
177
|
+
| `stepMinute` | number | Optional | `1` | Minutes to change per step. |
|
|
178
|
+
| `stepSecond` | number | Optional | `1` | Seconds to change per step. |
|
|
179
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the picker. |
|
|
180
|
+
| `dateTimeFilter` | `( date: T)=>boolean ` | Optional | `undefined` | A function to filter date time. |
|
|
181
|
+
| `min` | `<T>` | Optional | `undefined` | The minimum valid date time. |
|
|
182
|
+
| `max` | `<T>` | Optional | `undefined` | The maximum valid date time. |
|
|
183
|
+
| `selectMode` | `single` , `range` , `rangeFrom` , `rangeTo` | Optional | `single` | Specify the picker's select mode. `single` : a single value allowed, `range` : allow users to select a range of date-time, `rangeFrom` : the input would only show the 'from' value and the picker could only selects 'from' value, `rangeTo` : the input would only show the 'to' value and the picker could only selects 'to' value. |
|
|
184
|
+
|
|
185
|
+
## Localization and DateTime Format
|
|
186
|
+
|
|
187
|
+
Localization for different languages and formats is defined by `NXT_DATE_TIME_LOCALE` and `NXT_DATE_TIME_FORMATS`. You could learn more about this from [here](https://danielykpan.github.io/date-time-picker#locale-formats).
|
|
188
|
+
|
|
189
|
+
## Dependencies
|
|
190
|
+
|
|
205
191
|
none
|
|
206
192
|
|
|
207
|
-
Demo
|
|
208
|
-
-------
|
|
193
|
+
## Demo
|
|
209
194
|
|
|
210
|
-
|
|
211
|
-
|
|
195
|
+
- Online doc is [here](https://daniel-projects.firebaseapp.com/nxtng/date-time-picker)
|
|
196
|
+
- Online demo is [here](https://liquid-js.github.io/nxt-components/pick-datetime)
|
|
212
197
|
|
|
213
|
-
License
|
|
214
|
-
-------
|
|
198
|
+
## License
|
|
215
199
|
|
|
216
|
-
|
|
200
|
+
- License: MIT
|
|
217
201
|
|
|
218
|
-
Author
|
|
219
|
-
-------
|
|
220
|
-
**Daniel YK Pan**
|
|
202
|
+
## Author
|
|
221
203
|
|
|
204
|
+
**Daniel YK Pan**
|