@dintecom/ngx-datetime-picker 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/LICENSE +22 -0
- package/README.md +357 -0
- package/assets/style/picker.min.css +1 -0
- package/assets/style/picker.min.css.map +1 -0
- package/fesm2022/dintecom-ngx-datetime-picker.mjs +6523 -0
- package/fesm2022/dintecom-ngx-datetime-picker.mjs.map +1 -0
- package/package.json +50 -0
- package/types/dintecom-ngx-datetime-picker.d.ts +2365 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
The MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2014-2016 Daniel YK Pan.
|
|
4
|
+
Copyright (c) 2020 Daniel Moncada.
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
in the Software without restriction, including without limitation the rights
|
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
furnished to do so, subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in
|
|
14
|
+
all copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
22
|
+
THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,357 @@
|
|
|
1
|
+
# :date: :clock1: Angular Date/Time Picker
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@dintecom/ngx-datetime-picker)
|
|
4
|
+
[](https://www.npmjs.com/package/@dintecom/ngx-datetime-picker)
|
|
5
|
+
|
|
6
|
+
**The current version of this package supports Angular 22**
|
|
7
|
+
|
|
8
|
+
If you need support for other Angular version, see _Breaking Changes_ below.
|
|
9
|
+
|
|
10
|
+
## Breaking Changes
|
|
11
|
+
|
|
12
|
+
- Version 22.x.x is the official release for Angular 22 and it also supports Angular 21.
|
|
13
|
+
- Version 21.x.x is the official release for Angular 21 and it also supports Angular 20.
|
|
14
|
+
- Version 20.x.x is the official release for Angular 20 and it also supports Angular 19.
|
|
15
|
+
- Version 19.x.x >= no longer supports ng 18. If you need ng 18 support, stick with version 18.x.x.
|
|
16
|
+
- Version 18.x.x >= no longer supports ng 17. If you need ng 17 support, stick with version 17.x.x.
|
|
17
|
+
- Version 17.x.x >= no longer supports ng 16 - 13. If you need ng 16-13 support, stick with version 16.x.x.
|
|
18
|
+
- Version 14.x.x >= no longer supports < ng 13. If you need View Engine support, stick with version 13.x.x.
|
|
19
|
+
- Version 13.1.0+ no longer supports the `MomentJs` time adapter natively. If you want to use the MomentJs adapter, see [GitHub](https://github.com/dintecom/date-time-picker-moment-adapter) or [npm](https://www.npmjs.com/package/@dintecom/ngx-datetime-picker-moment-adapter).
|
|
20
|
+
- If you need ng 8 support, please stick with: https://github.com/DanielYKPan/date-time-picker
|
|
21
|
+
|
|
22
|
+
## Description
|
|
23
|
+
|
|
24
|
+
Simple Angular date time picker. Online doc is [here](https://daniel-projects.firebaseapp.com/owlng/date-time-picker), Online demos(StackBlitz) are [here](https://stackblitz.com/edit/angular-vvp849) and [here](https://stackblitz.com/edit/angular-i7ykf5).
|
|
25
|
+
This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices.
|
|
26
|
+
|
|
27
|
+
## How to Use
|
|
28
|
+
|
|
29
|
+
1. Install with [npm](https://www.npmjs.com): `npm install @dintecom/ngx-datetime-picker --save`
|
|
30
|
+
2. Install [`@angular/cdk`](https://material.angular.io/cdk/categories), which is a peer dependency and provides the overlay used by the picker: `npm install @angular/cdk --save`.
|
|
31
|
+
If your app already uses [Angular Material](https://material.angular.io), the CDK is installed for you and this step (and the overlay styles below) is already covered.
|
|
32
|
+
3. Add styles.
|
|
33
|
+
The picker renders its popup/dialog inside a CDK overlay, so you need both the picker styles and the CDK's prebuilt overlay styles. If you are **not** using Angular Material, add them once — either in your `styles.scss`:
|
|
34
|
+
```scss
|
|
35
|
+
@use '@angular/cdk/overlay-prebuilt.css';
|
|
36
|
+
@use '@dintecom/ngx-datetime-picker/assets/style/picker.min.css';
|
|
37
|
+
```
|
|
38
|
+
or via the `styles` array in `angular.json`:
|
|
39
|
+
```json
|
|
40
|
+
"styles": [
|
|
41
|
+
"node_modules/@angular/cdk/overlay-prebuilt.css",
|
|
42
|
+
"node_modules/@dintecom/ngx-datetime-picker/assets/style/picker.min.css",
|
|
43
|
+
"src/styles.scss"
|
|
44
|
+
]
|
|
45
|
+
```
|
|
46
|
+
(If you already import Angular Material's theme, the CDK overlay styles are included and you only need the picker styles.)
|
|
47
|
+
|
|
48
|
+
4. **Configure animations (required)** - see [Animation section](#animation) below for details.
|
|
49
|
+
|
|
50
|
+
### Standalone App Configuration (Recommended)
|
|
51
|
+
|
|
52
|
+
Add provider functions to your application config in `main.ts`:
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
56
|
+
import { provideAnimations } from '@angular/platform-browser/animations';
|
|
57
|
+
import {
|
|
58
|
+
provideOwlDateTime,
|
|
59
|
+
provideOwlNativeDateTime
|
|
60
|
+
} from '@dintecom/ngx-datetime-picker';
|
|
61
|
+
import { AppComponent } from './app/app.component';
|
|
62
|
+
|
|
63
|
+
bootstrapApplication(AppComponent, {
|
|
64
|
+
providers: [
|
|
65
|
+
provideAnimations(),
|
|
66
|
+
provideOwlDateTime(),
|
|
67
|
+
provideOwlNativeDateTime(),
|
|
68
|
+
//...
|
|
69
|
+
]
|
|
70
|
+
});
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Then in your component, import the picker components:
|
|
74
|
+
|
|
75
|
+
```typescript
|
|
76
|
+
import { Component } from '@angular/core';
|
|
77
|
+
import { FormsModule } from '@angular/forms';
|
|
78
|
+
import {
|
|
79
|
+
OwlDateTimeComponent,
|
|
80
|
+
OwlDateTimeTriggerDirective,
|
|
81
|
+
OwlDateTimeInputDirective
|
|
82
|
+
} from '@dintecom/ngx-datetime-picker';
|
|
83
|
+
|
|
84
|
+
@Component({
|
|
85
|
+
selector: 'app-example',
|
|
86
|
+
standalone: true,
|
|
87
|
+
imports: [
|
|
88
|
+
FormsModule,
|
|
89
|
+
OwlDateTimeComponent,
|
|
90
|
+
OwlDateTimeTriggerDirective,
|
|
91
|
+
OwlDateTimeInputDirective
|
|
92
|
+
],
|
|
93
|
+
template: `
|
|
94
|
+
<input
|
|
95
|
+
[(ngModel)]="selectedDate"
|
|
96
|
+
[owlDateTime]="dt1"
|
|
97
|
+
[owlDateTimeTrigger]="dt1"
|
|
98
|
+
placeholder="Date Time">
|
|
99
|
+
<owl-date-time #dt1></owl-date-time>
|
|
100
|
+
`
|
|
101
|
+
})
|
|
102
|
+
export class ExampleComponent {
|
|
103
|
+
selectedDate = new Date();
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### NgModule Configuration (Legacy)
|
|
108
|
+
|
|
109
|
+
Add **OwlDateTimeModule** and **OwlNativeDateTimeModule** to your **@NgModule**:
|
|
110
|
+
|
|
111
|
+
```typescript
|
|
112
|
+
import { NgModule } from '@angular/core';
|
|
113
|
+
import { BrowserModule } from '@angular/platform-browser';
|
|
114
|
+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
115
|
+
import { MyTestApp } from './my-test-app';
|
|
116
|
+
import {
|
|
117
|
+
OwlDateTimeModule,
|
|
118
|
+
OwlNativeDateTimeModule
|
|
119
|
+
} from '@dintecom/ngx-datetime-picker';
|
|
120
|
+
|
|
121
|
+
@NgModule({
|
|
122
|
+
imports: [
|
|
123
|
+
BrowserModule,
|
|
124
|
+
BrowserAnimationsModule,
|
|
125
|
+
OwlDateTimeModule,
|
|
126
|
+
OwlNativeDateTimeModule
|
|
127
|
+
],
|
|
128
|
+
declarations: [MyTestApp],
|
|
129
|
+
bootstrap: [MyTestApp],
|
|
130
|
+
})
|
|
131
|
+
export class MyTestAppModule {}
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### Basic Usage
|
|
135
|
+
|
|
136
|
+
Connecting a picker to an input and a trigger:
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time" />
|
|
140
|
+
<owl-date-time #dt1></owl-date-time>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
With a separate trigger button:
|
|
144
|
+
|
|
145
|
+
```html
|
|
146
|
+
<input [owlDateTime]="dt2" placeholder="Date Time" />
|
|
147
|
+
<span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
|
|
148
|
+
<owl-date-time #dt2></owl-date-time>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
The examples above are quite basic. The picker has much more features,
|
|
152
|
+
and you could learn more about those from [demo page](https://danielykpan.github.io/date-time-picker/).
|
|
153
|
+
|
|
154
|
+
### For Standalone Applications (Recommended)
|
|
155
|
+
|
|
156
|
+
In your `main.ts` or application config, use `provideAnimations()`:
|
|
157
|
+
|
|
158
|
+
```typescript
|
|
159
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
160
|
+
import { provideAnimations } from '@angular/platform-browser/animations';
|
|
161
|
+
import { AppComponent } from './app/app.component';
|
|
162
|
+
|
|
163
|
+
bootstrapApplication(AppComponent, {
|
|
164
|
+
providers: [
|
|
165
|
+
provideAnimations(),
|
|
166
|
+
//...
|
|
167
|
+
]
|
|
168
|
+
});
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
If you prefer to disable animation effects, use `provideNoopAnimations()` instead:
|
|
172
|
+
|
|
173
|
+
```typescript
|
|
174
|
+
import { provideNoopAnimations } from '@angular/platform-browser/animations';
|
|
175
|
+
|
|
176
|
+
bootstrapApplication(AppComponent, {
|
|
177
|
+
providers: [
|
|
178
|
+
provideNoopAnimations(),
|
|
179
|
+
//...
|
|
180
|
+
]
|
|
181
|
+
});
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
### For NgModule-based Applications (Legacy)
|
|
185
|
+
|
|
186
|
+
Import `BrowserAnimationsModule` in your app module:
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
## Zoneless Support
|
|
190
|
+
|
|
191
|
+
This library fully supports Angular's **zoneless mode** (experimental in Angular 18+). You can run your application without zone.js for improved performance and reduced bundle size.
|
|
192
|
+
|
|
193
|
+
### Enabling Zoneless Mode
|
|
194
|
+
|
|
195
|
+
In your `main.ts`:
|
|
196
|
+
|
|
197
|
+
```typescript
|
|
198
|
+
import { bootstrapApplication } from '@angular/platform-browser';
|
|
199
|
+
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
|
|
200
|
+
import { provideAnimations } from '@angular/platform-browser/animations';
|
|
201
|
+
import {
|
|
202
|
+
provideOwlDateTime,
|
|
203
|
+
provideOwlNativeDateTime
|
|
204
|
+
} from '@dintecom/ngx-datetime-picker';
|
|
205
|
+
import { AppComponent } from './app/app.component';
|
|
206
|
+
|
|
207
|
+
bootstrapApplication(AppComponent, {
|
|
208
|
+
providers: [
|
|
209
|
+
provideExperimentalZonelessChangeDetection(), // Enable zoneless mode
|
|
210
|
+
provideAnimations(),
|
|
211
|
+
provideOwlDateTime(),
|
|
212
|
+
provideOwlNativeDateTime(),
|
|
213
|
+
//...
|
|
214
|
+
]
|
|
215
|
+
});
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Benefits of Zoneless Mode
|
|
219
|
+
|
|
220
|
+
- **Better Performance**: Eliminates zone.js overhead and monkey-patching
|
|
221
|
+
- **Smaller Bundle Size**: Removes zone.js dependency (~15KB)
|
|
222
|
+
- **Predictable Change Detection**: Explicit control over when change detection runs
|
|
223
|
+
- **Modern Architecture**: Aligns with Angular's future direction
|
|
224
|
+
|
|
225
|
+
The date-time picker will work seamlessly in both zoned and zoneless applications without any code changes.
|
|
226
|
+
## Choose a date implementation
|
|
227
|
+
|
|
228
|
+
The date-time picker was built to be date implementation agnostic.
|
|
229
|
+
Developers need to make sure to provide the appropriate pieces for the picker to work with their chosen implementation.
|
|
230
|
+
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)).
|
|
231
|
+
|
|
232
|
+
- `OwlNativeDateTimeModule` - support for native JavaScript Date object
|
|
233
|
+
- `OwlUnixTimestampDateTimeModule` - support for milliseconds since Epoch (number)
|
|
234
|
+
|
|
235
|
+
##### Date/Time Adapter Extensions
|
|
236
|
+
|
|
237
|
+
<img src="https://day.js.org/img/logo.png" width="50"/> https://day.js.org/
|
|
238
|
+
|
|
239
|
+
- `OwlDayJsDateTimeModule` - support for DayJs
|
|
240
|
+
- You must install an optional adapater to use this. see [here](https://github.com/danielmoncada/date-time-picker-dayjs-adapter), [npm](https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker-dayjs-adapter)
|
|
241
|
+
|
|
242
|
+
<img src="https://avatars.githubusercontent.com/u/4129662?s=200&v=4" width="50"/> https://momentjs.com/
|
|
243
|
+
|
|
244
|
+
- `OwlMomentDateTimeModule` - support for MomentJs
|
|
245
|
+
- You must install an optional adapater to use this. see [here](https://github.com/danielmoncada/date-time-picker-moment-adapter), [npm](https://www.npmjs.com/package/@danielmoncada/angular-datetime-picker-moment-adapter)
|
|
246
|
+
|
|
247
|
+
## Properties for `owl-date-time`
|
|
248
|
+
|
|
249
|
+
| Name | Type | Required | Default | Description |
|
|
250
|
+
| :------------------ | :---------------------------- | :------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
251
|
+
| `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. |
|
|
252
|
+
| `pickerMode` | `popup`, `dialog` | Optional | `popup` | The style the picker would open as. |
|
|
253
|
+
| `startView` | `month`, `year`, `multi-year` | Optional | `month` | The view that the calendar should start in. |
|
|
254
|
+
| `yearOnly` | boolean | Optional | `false` | Restricts the calendar to only show the year and multi-year views for month selection. |
|
|
255
|
+
| `showCalendarWeeks` | boolean | Optional | `false` | Whether to show calendar weeks in the calendar. |
|
|
256
|
+
| `multiyearOnly` | boolean | Optional | `false` | Restricts the calendar to only show the multi-year view for year selection. |
|
|
257
|
+
| `startAt` | T/null | Optional | `null` | The moment to open the picker to initially. |
|
|
258
|
+
| `endAt` | T/null | Optional | `null` | The the default selected time for range calendar end time |
|
|
259
|
+
| `firstDayOfWeek` | number | Optional | `0` | Set the first day of week. Valid value is from 0 to 6. 0: Sunday - 6: Saturday |
|
|
260
|
+
| `showSecondsTimer` | boolean | Optional | `false` | When specify it to true, it would show a timer to configure the second's value |
|
|
261
|
+
| `hideOtherMonths` | boolean | Optional | `false` | Whether to hide dates in other months at the start or end of the current month |
|
|
262
|
+
| `hour12Timer` | boolean | Optional | `false` | When specify it to true, the timer would be in hour12 format mode |
|
|
263
|
+
| `stepHour` | number | Optional | `1` | Hours to change per step. |
|
|
264
|
+
| `stepMinute` | number | Optional | `1` | Minutes to change per step. |
|
|
265
|
+
| `stepSecond` | number | Optional | `1` | Seconds to change per step. |
|
|
266
|
+
| `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. |
|
|
267
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the picker. |
|
|
268
|
+
| `backdropClass` | string/string[] | Optional | `null` | Custom class for the picker backdrop. |
|
|
269
|
+
| `panelClass` | string/string[] | Optional | `null` | Custom class for the picker overlay panel. |
|
|
270
|
+
|
|
271
|
+
## Events for `owl-date-time`
|
|
272
|
+
|
|
273
|
+
| Events | Parameter | Description |
|
|
274
|
+
| :------------------ | :-------- | :---------------------------------------------------------------------------------------------- |
|
|
275
|
+
| `beforePickerOpen` | null | Callback to invoke before the picker is opened |
|
|
276
|
+
| `afterPickerOpen` | null | Callback to invoke when the picker is opened |
|
|
277
|
+
| `afterPickerClosed` | null | Callback to invoke when the picker is closed. |
|
|
278
|
+
| `yearSelected` | T | Callback to invoke when the year is selected.This doesn't imply a change on the selected date. |
|
|
279
|
+
| `monthSelected` | T | Callback to invoke when the month is selected.This doesn't imply a change on the selected date. |
|
|
280
|
+
| `dateClicked` | T | Callback when the selected data changes. |
|
|
281
|
+
| `selectedChanged` | T | Callback when the currently selected data changes. |
|
|
282
|
+
| `userSelection` | null | Callback when any date is selected. |
|
|
283
|
+
|
|
284
|
+
## Properties for `input[owlDateTime]`
|
|
285
|
+
|
|
286
|
+
| Name | Type | Required | Default | Description |
|
|
287
|
+
| :------------------ | :---------------------------------------- | :------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
288
|
+
| `owlDateTime` | `OwlDateTimeComponent<T>` | Require | `null` | The date time picker that this input is associated with. |
|
|
289
|
+
| `owlDateTimeFilter` | `( date: T)=>boolean ` | Optional | `null` | A function to filter date time. |
|
|
290
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the picker's input. |
|
|
291
|
+
| `min` | `<T>` | Optional | `null` | The minimum valid date time. |
|
|
292
|
+
| `max` | `<T>` | Optional | `null` | The maximum valid date time. |
|
|
293
|
+
| `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. |
|
|
294
|
+
| `rangeSeparator` | string | Optional | `-` | The character to separate the 'from' and 'to' in input value in range selectMode. |
|
|
295
|
+
|
|
296
|
+
## Events for `input[owlDateTime]`
|
|
297
|
+
|
|
298
|
+
| Events | Parameter | Description |
|
|
299
|
+
| :--------------- | :--------------------------------------------------------------------- | :--------------------------------------------------------------------------------- |
|
|
300
|
+
| `dateTimeChange` | source: OwlDateTimeInput, value: input value, input: the input element | Callback to invoke when `change` event is fired on this `<input [owlDateTime]>` |
|
|
301
|
+
| `dateTimeInput` | source: OwlDateTimeInput, value: input value, input: the input element | Callback to invoke when an `input` event is fired on this `<input [owlDateTime]>`. |
|
|
302
|
+
|
|
303
|
+
## Properties for `[owlDateTimeTrigger]`
|
|
304
|
+
|
|
305
|
+
| Name | Type | Required | Default | Description |
|
|
306
|
+
| :------------------- | :------------------------ | :------- | :------ | :--------------------------------------------------------- |
|
|
307
|
+
| `owlDateTimeTrigger` | `OwlDateTimeComponent<T>` | Require | `null` | The date time picker that this trigger is associated with. |
|
|
308
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the trigger. |
|
|
309
|
+
|
|
310
|
+
## Properties for `[owlDateTimeTrigger]`
|
|
311
|
+
|
|
312
|
+
| Name | Type | Required | Default | Description |
|
|
313
|
+
| :------------------- | :------------------------ | :------- | :------ | :--------------------------------------------------------- |
|
|
314
|
+
| `owlDateTimeTrigger` | `OwlDateTimeComponent<T>` | Require | `null` | The date time picker that this trigger is associated with. |
|
|
315
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the trigger. |
|
|
316
|
+
|
|
317
|
+
## Properties for `owl-date-time-inline`
|
|
318
|
+
|
|
319
|
+
| Name | Type | Required | Default | Description |
|
|
320
|
+
| :------------------ | :---------------------------------------- | :------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
321
|
+
| `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. |
|
|
322
|
+
| `startView` | `month`, `year`, `multi-year` | Optional | `month` | The view that the calendar should start in. |
|
|
323
|
+
| `startAt` | T/null | Optional | `null` | The moment to open the picker to initially. |
|
|
324
|
+
| `endAt` | T/null | Optional | `null` | The the default selected time for range calendar end time |
|
|
325
|
+
| `firstDayOfWeek` | number | Optional | `0` | Set the first day of week. Valid value is from 0 to 6. 0: Sunday - 6: Saturday |
|
|
326
|
+
| `showSecondsTimer` | boolean | Optional | `false` | When specify it to true, it would show a timer to configure the second's value |
|
|
327
|
+
| `hideOtherMonths` | boolean | Optional | `false` | Whether to hide dates in other months at the start or end of the current month |
|
|
328
|
+
| `hour12Timer` | boolean | Optional | `false` | When specify it to true, the timer would be in hour12 format mode |
|
|
329
|
+
| `stepHour` | number | Optional | `1` | Hours to change per step. |
|
|
330
|
+
| `stepMinute` | number | Optional | `1` | Minutes to change per step. |
|
|
331
|
+
| `stepSecond` | number | Optional | `1` | Seconds to change per step. |
|
|
332
|
+
| `disabled` | boolean | Optional | `false` | When specify to true, it would disable the picker. |
|
|
333
|
+
| `owlDateTimeFilter` | `( date: T)=>boolean ` | Optional | `null` | A function to filter date time. |
|
|
334
|
+
| `min` | `<T>` | Optional | `null` | The minimum valid date time. |
|
|
335
|
+
| `max` | `<T>` | Optional | `null` | The maximum valid date time. |
|
|
336
|
+
| `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. |
|
|
337
|
+
|
|
338
|
+
## Localization and DateTime Format
|
|
339
|
+
|
|
340
|
+
Localization for different languages and formats is defined by `OWL_DATE_TIME_LOCALE` and `OWL_DATE_TIME_FORMATS`. You could learn more about this from [here](https://danielykpan.github.io/date-time-picker#locale-formats).
|
|
341
|
+
|
|
342
|
+
## Dependencies
|
|
343
|
+
|
|
344
|
+
- [`@angular/cdk`](https://material.angular.io/cdk/categories) (peer dependency) — provides the overlay the picker is rendered in. Remember to include the CDK overlay styles (`@use '@angular/cdk/overlay-prebuilt.css';`) unless you already use Angular Material. See [How to Use](#how-to-use).
|
|
345
|
+
|
|
346
|
+
## Demo
|
|
347
|
+
|
|
348
|
+
- Online doc is [here](https://daniel-projects.firebaseapp.com/owlng/date-time-picker)
|
|
349
|
+
- Online demos (StackBlitz) are [here](https://stackblitz.com/edit/angular-vvp849) and [here](https://stackblitz.com/edit/angular-i7ykf5)
|
|
350
|
+
|
|
351
|
+
## License
|
|
352
|
+
|
|
353
|
+
- License: MIT
|
|
354
|
+
|
|
355
|
+
## Author
|
|
356
|
+
|
|
357
|
+
**Maintained and updated by Daniel Moncada, original implementatiom by Daniel Pan**
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.owl-dialog-container{position:relative;pointer-events:auto;box-sizing:border-box;display:block;padding:1.5em;width:100%;height:100%;outline:none}.owl-dialog-container .owl-dt-container{border-radius:2px;overflow:auto;background:#fff;color:rgba(0,0,0,.87);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0px 24px 38px 3px rgba(0,0,0,.14),0px 9px 46px 8px rgba(0,0,0,.12)}.owl-dt-container,.owl-dt-container *{box-sizing:border-box}.owl-dt-container{display:block;font-size:1rem;background:#fff;pointer-events:auto;z-index:1000}.owl-dt-container-row{border-bottom:1px solid rgba(0,0,0,.12)}.owl-dt-container-row:last-child{border-bottom:none}.owl-dt-calendar{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;width:100%}.owl-dt-calendar-control{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;font-size:1em;width:100%;padding:.5em;color:#000}.owl-dt-calendar-control .owl-dt-calendar-control-content{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center}.owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button{padding:0 .8em}.owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button:hover{background-color:rgba(0,0,0,.12)}.owl-dt-calendar-main{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-flex:1;flex:1 1 auto;padding:0 .5em .5em;outline:0}.owl-dt-calendar-view{display:flex;-webkit-box-flex:1;flex:1 1 auto}.owl-dt-calendar-multi-year-view{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.owl-dt-calendar-multi-year-view .owl-dt-calendar-table{width:calc(100% - 3em)}.owl-dt-calendar-multi-year-view .owl-dt-calendar-table .owl-dt-calendar-header th{padding-bottom:.25em}.owl-dt-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}.owl-dt-calendar-table .owl-dt-calendar-header{color:rgba(0,0,0,.4)}.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{font-size:.7em;font-weight:400;text-align:center;padding-bottom:1em}.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider{position:relative;height:1px;padding-bottom:.5em}.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider:after{content:"";position:absolute;top:0;left:-0.5em;right:-0.5em;height:1px;background:rgba(0,0,0,.12)}.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider.owl-calendar-weeks:after{left:-1.8em}.owl-dt-calendar-table .owl-dt-calendar-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;color:rgba(0,0,0,.85);-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0)}.owl-dt-calendar-table .owl-dt-calendar-cell-content{position:absolute;top:5%;left:5%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;font-size:.8em;line-height:1;border:1px solid rgba(0,0,0,0);border-radius:999px;color:inherit;cursor:pointer}.owl-dt-calendar-table .owl-dt-calendar-cell-out{opacity:.2}.owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgba(0,0,0,.4)}.owl-dt-calendar-table .owl-dt-calendar-cell-selected{color:hsla(0,0%,100%,.85);background-color:#3f51b5}.owl-dt-calendar-table .owl-dt-calendar-cell-selected.owl-dt-calendar-cell-today{box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.85)}.owl-dt-calendar-table .owl-dt-calendar-cell-disabled{cursor:default}.owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){color:rgba(0,0,0,.4)}.owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content.owl-dt-calendar-cell-selected{opacity:.4}.owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgba(0,0,0,.2)}.owl-dt-calendar-table .owl-dt-calendar-cell-active:focus>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),.owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){background-color:rgba(0,0,0,.04)}.owl-dt-calendar-table .owl-dt-calendar-cell-in-range{background:rgba(63,81,181,.2)}.owl-dt-calendar-table .owl-dt-calendar-cell-in-range.owl-dt-calendar-cell-range-from{border-top-left-radius:999px;border-bottom-left-radius:999px}.owl-dt-calendar-table .owl-dt-calendar-cell-in-range.owl-dt-calendar-cell-range-to{border-top-right-radius:999px;border-bottom-right-radius:999px}.owl-dt-calendar-table.owl-calendar-weeks .owl-dt-calendar-cell-content{height:86%}.owl-dt-timer{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;width:100%;height:7em;padding:.5em;outline:none}.owl-dt-timer-box{position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-align:center;align-items:center;width:25%;height:100%}.owl-dt-timer-content{-webkit-box-flex:1;flex:1 1 auto;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:100%;margin:.2em 0}.owl-dt-timer-content .owl-dt-timer-input{display:block;width:2em;text-align:center;border:1px solid rgba(0,0,0,.5);border-radius:3px;outline:medium none;font-size:1.2em;padding:.2em}.owl-dt-timer-divider{display:inline-block;align-self:flex-end;position:absolute;width:.6em;height:100%;left:-0.3em}.owl-dt-timer-divider:before,.owl-dt-timer-divider:after{content:"";display:inline-block;width:.35em;height:.35em;position:absolute;left:50%;border-radius:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:currentColor}.owl-dt-timer-divider:before{top:35%}.owl-dt-timer-divider:after{bottom:35%}.owl-dt-control-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0);display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;margin:0;padding:0;background-color:rgba(0,0,0,0);font-size:1em;color:inherit}.owl-dt-control-button .owl-dt-control-button-content{position:relative;display:-webkit-inline-box;display:inline-flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;outline:none}.owl-dt-control-period-button .owl-dt-control-button-content{height:1.5em;padding:0 .5em;border-radius:3px;-webkit-transition:background-color 100ms linear;transition:background-color 100ms linear}.owl-dt-control-period-button:hover>.owl-dt-control-button-content{background-color:rgba(0,0,0,.12)}.owl-dt-control-period-button .owl-dt-control-button-arrow{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;width:1em;height:1em;margin:.1em;-webkit-transition:-webkit-transform 200ms ease;transition:-webkit-transform 200ms ease;transition:transform 200ms ease;transition:transform 200ms ease,-webkit-transform 200ms ease}.owl-dt-control-arrow-button .owl-dt-control-button-content{padding:0;border-radius:50%;width:1.5em;height:1.5em}.owl-dt-control-arrow-button[disabled]{color:rgba(0,0,0,.4);cursor:default}.owl-dt-control-arrow-button svg{width:50%;height:50%;fill:currentColor}.owl-dt-inline-container,.owl-dt-popup-container{position:relative;width:18.5em;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.owl-dt-inline-container .owl-dt-calendar,.owl-dt-inline-container .owl-dt-timer,.owl-dt-popup-container .owl-dt-calendar,.owl-dt-popup-container .owl-dt-timer{width:100%}.owl-dt-inline-container .owl-dt-calendar,.owl-dt-popup-container .owl-dt-calendar{height:20.25em}.owl-dt-dialog-container{max-height:95vh;margin:-1.5em}.owl-dt-dialog-container .owl-dt-calendar{min-width:250px;min-height:330px;max-width:750px;max-height:750px}.owl-dt-dialog-container .owl-dt-timer{min-width:250px;max-width:750px}@media all and (orientation: landscape){.owl-dt-dialog-container .owl-dt-calendar{width:58vh;height:62vh}.owl-dt-dialog-container .owl-dt-timer{width:58vh}}@media all and (orientation: portrait){.owl-dt-dialog-container .owl-dt-calendar{width:80vw;height:80vw}.owl-dt-dialog-container .owl-dt-timer{width:80vw}}.owl-dt-container-buttons{display:-webkit-box;display:flex;width:100%;height:2em;color:#3f51b5}.owl-dt-container-control-button{font-size:1em;width:50%;height:100%;border-radius:0}.owl-dt-container-control-button .owl-dt-control-button-content{height:100%;width:100%;-webkit-transition:background-color 100ms linear;transition:background-color 100ms linear}.owl-dt-container-control-button:hover .owl-dt-control-button-content{background-color:rgba(0,0,0,.1)}.owl-dt-container-info{padding:0 .5em;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.owl-dt-container-info .owl-dt-container-range{outline:none}.owl-dt-container-info .owl-dt-container-range .owl-dt-container-range-content{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;padding:.5em 0;font-size:.8em}.owl-dt-container-info .owl-dt-container-range:last-child{border-top:1px solid rgba(0,0,0,.12)}.owl-dt-container-info .owl-dt-container-info-active{color:#3f51b5}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none;cursor:default !important}.owl-dt-timer-hour12{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;color:#3f51b5}.owl-dt-timer-hour12 .owl-dt-timer-hour12-box{border:1px solid currentColor;border-radius:2px;-webkit-transition:background 200ms ease;transition:background 200ms ease}.owl-dt-timer-hour12 .owl-dt-timer-hour12-box .owl-dt-control-button-content{width:100%;height:100%;padding:.5em}.owl-dt-timer-hour12 .owl-dt-timer-hour12-box:focus .owl-dt-control-button-content,.owl-dt-timer-hour12 .owl-dt-timer-hour12-box:hover .owl-dt-control-button-content{background:#3f51b5;color:#fff}.owl-dt-calendar-only-current-month .owl-dt-calendar-cell-out{visibility:hidden;cursor:default}.owl-dt-inline{display:inline-block}.owl-dt-control{outline:none;cursor:pointer}.owl-dt-control .owl-dt-control-content{outline:none}.owl-dt-control:focus>.owl-dt-control-content{background-color:rgba(0,0,0,.12)}.owl-dt-control:not(:-moz-focusring):focus>.owl-dt-control-content{box-shadow:none}.owl-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.owl-hour-input{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px}.owl-hour-input owl-date-time-timer-box{width:auto}.owl-hour-input .owl-dt-timer-hour12>.owl-dt-control-button{display:flex}.owl-hour-input .owl-dt-timer-hour12>.owl-dt-control-button[disabled]{cursor:default !important}.owl-hour-input .owl-dt-timer-hour12>.owl-dt-control-button.owl-dt-timer-hour12-box[disabled]>.owl-dt-control-button-content,.owl-hour-input .owl-dt-timer-hour12>.owl-dt-control-button.owl-dt-timer-hour12-box[disabled]:hover>.owl-dt-control-button-content{cursor:default !important;background-color:rgba(239,239,239,.3) !important;color:#545454 !important}/*# sourceMappingURL=picker.min.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../projects/picker/src/sass/picker.scss"],"names":[],"mappings":"AAAA,sBACE,kBACA,oBACA,sBACA,cACA,cACA,WACA,YACA,aAEA,wCACI,kBACA,cACF,gBACA,sBACA,8GAQJ,sCAEE,sBAGF,kBACE,cACA,eACA,gBACA,oBACA,aAGF,sBACE,wCAEA,iCACE,mBAIJ,iBACE,oBACA,aACA,4BACA,6BACQ,sBACR,WAGF,yBACE,oBACA,aACA,yBACQ,mBACR,cACA,WACA,aACA,WAEA,0DACE,mBACQ,cACR,oBACA,aACA,wBACQ,uBACR,yBACQ,mBAER,0FACE,eAEA,gGACE,iCAMR,sBACE,oBACA,aACA,4BACA,6BACQ,sBACR,mBACQ,cACR,oBACA,UAGF,sBACE,aACA,mBACQ,cAGV,iCACE,oBACA,aACA,yBACQ,mBAER,wDACE,uBAEA,mFACE,qBAKN,uBACE,WACA,yBACA,iBAEA,+CACE,qBAGE,mEACE,eACA,gBACA,kBACA,mBAIJ,8EACE,kBACA,WACA,oBAEA,oFACE,WACA,kBACA,MACA,YACA,aACA,WACA,2BAGA,uGACE,YAMR,6CACE,kBACA,SACA,cACA,kBACA,UACA,sBACA,wBACA,0CACA,0CAGF,qDACE,kBACA,OACA,QACA,oBACA,aACA,yBACQ,mBACR,wBACQ,uBACR,sBACA,UACA,WACA,eACA,cACA,+BACA,oBACA,cACA,eAGF,iDACE,WAGF,uFACE,4BAGF,sDACE,0BACA,iBAjLU,QAmLV,iFACE,+CAIJ,sDACE,eAEA,wHACE,qBAGF,kHACE,WAGF,sHACE,4BAIJ,gQAEE,iCAGF,sDACE,8BAEA,sFACE,6BACA,gCAGF,oFACE,8BACA,iCAIF,wEACE,WAKN,cACE,oBACA,aACA,wBACQ,uBACR,WACA,WACA,aACA,aAGF,kBACE,kBACA,2BACA,oBACA,4BACA,6BACQ,sBACR,yBACQ,mBACR,UACA,YAGF,sBACE,mBACQ,cACR,oBACA,aACA,wBACQ,uBACR,yBACQ,mBACR,WACA,cAEA,0CACE,cACA,UACA,kBACA,gCACA,kBACA,oBACA,gBACA,aAIJ,sBACE,qBACA,oBACA,kBACA,WACA,YACA,YAEA,yDAEE,WACA,qBACA,YACA,aACA,kBACA,SACA,kBACA,mCACQ,2BACR,8BAGF,6BACE,QAGF,4BACE,WAIJ,uBACE,yBACG,sBACC,qBACI,iBACR,eACA,aACA,YACA,0CACA,qBACA,mBACA,qBACA,wBACA,SACA,UACA,+BACA,cACA,cAEA,sDACE,kBACA,2BACA,oBACA,wBACQ,uBACR,yBACQ,mBACR,aAKF,6DACE,aACA,eACA,kBACA,iDACA,yCAGF,mEACE,iCAGF,2DACE,oBACA,aACA,wBACQ,uBACR,yBACQ,mBACR,UACA,WACA,YACA,gDACA,wCACA,gCACA,6DAKF,4DACE,UACA,kBACA,YACA,aAGF,uCACE,qBACA,eAGF,iCACE,UACA,WACA,kBAIJ,iDAEE,kBACA,aACA,uGAIA,gKAEE,WAGF,mFACE,eAIJ,yBACE,gBACA,cAEA,0CACE,gBACA,iBACA,gBACA,iBAGF,uCACE,gBACA,gBAIJ,wCAEI,0CACE,WACA,YAGF,uCACE,YAKN,uCAEI,0CACE,WACA,YAGF,uCACE,YAKN,0BACE,oBACA,aACA,WACA,WACA,MAncY,QAscd,iCACE,cACA,UACA,YACA,gBAEA,gEACE,YACA,WACA,iDACA,yCAIA,sEACE,gCAKN,uBACE,eACA,eACA,0CAEA,+CACE,aAEA,+EACE,oBACA,aACA,yBACQ,8BACR,eACA,eAGF,0DACE,qCAIJ,qDACE,MAjfU,QAqfd,oDAEE,YACA,yBACA,sBACA,0BAGF,qBACE,oBACA,aACA,wBACQ,uBACR,yBACQ,mBACR,MApgBY,QAsgBZ,8CACE,8BACA,kBACA,yCACA,iCAEA,6EACE,WACA,YACA,aAIA,sKACE,WAphBM,QAqhBN,WAON,8DACE,kBACA,eAIJ,eACE,qBAGF,gBACE,aACA,eAEA,wCACE,aAGF,8CACE,iCAGF,mEACE,gBAIJ,uBACE,SACA,mBACA,WACA,YACA,gBACA,UACA,kBACA,UAGF,gBACE,aACA,mBACA,iBACA,QAEA,wCACE,WAGF,4DACE,aAEA,sEACE,0BAGF,gQAEI,0BACA,iDACA","file":"picker.min.css"}
|