@wernfried/daterangepicker 4.15.0 → 4.16.9
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 +176 -117
- package/dist/esm/daterangepicker.js +461 -358
- package/dist/esm/daterangepicker.min.js +2 -2
- package/dist/global/daterangepicker.js +461 -358
- package/dist/global/daterangepicker.min.js +2 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -20,8 +20,8 @@ Above samples are based on the [original repository](https://github.com/dangross
|
|
|
20
20
|
```html
|
|
21
21
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
|
|
22
22
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
|
|
23
|
-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.
|
|
24
|
-
<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.
|
|
23
|
+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.16.9/dist/global/daterangepicker.min.js"></script>
|
|
24
|
+
<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.16.9/css/daterangepicker.min.css" rel="stylesheet" />
|
|
25
25
|
|
|
26
26
|
<input type="text" id="picker" />
|
|
27
27
|
|
|
@@ -43,11 +43,11 @@ Above samples are based on the [original repository](https://github.com/dangross
|
|
|
43
43
|
"imports": {
|
|
44
44
|
"jquery": "https://cdn.jsdelivr.net/npm/jquery@4.0.0/+esm",
|
|
45
45
|
"luxon": "https://cdn.jsdelivr.net/npm/luxon@3.7.2/+esm",
|
|
46
|
-
"daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.
|
|
46
|
+
"daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.16.9/+esm"
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
</script>
|
|
50
|
-
<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.
|
|
50
|
+
<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.16.9/css/daterangepicker.min.css" rel="stylesheet" />
|
|
51
51
|
|
|
52
52
|
<input type="text" id="picker" />
|
|
53
53
|
|
|
@@ -68,7 +68,7 @@ Above samples are based on the [original repository](https://github.com/dangross
|
|
|
68
68
|
```html
|
|
69
69
|
<script ...></script>
|
|
70
70
|
<link type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" rel="stylesheet" />
|
|
71
|
-
<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.
|
|
71
|
+
<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.16.9/css/daterangepicker.bulma.min.css" rel="stylesheet" />
|
|
72
72
|
|
|
73
73
|
<input type="text" id="picker" />
|
|
74
74
|
|
|
@@ -265,8 +265,11 @@ Licensed under the [MIT license](LICENSE).
|
|
|
265
265
|
## Events
|
|
266
266
|
|
|
267
267
|
<dl>
|
|
268
|
-
<dt><a href="#event_violated.daterangepicker">"violated.daterangepicker" (this, result)</a> ⇒ <code>boolean</code></dt>
|
|
269
|
-
<dd><p>Emitted
|
|
268
|
+
<dt><a href="#event_violated.daterangepicker">"violated.daterangepicker" (this, picker, result, newDate)</a> ⇒ <code>boolean</code></dt>
|
|
269
|
+
<dd><p>Emitted when the date is changed through <code><input></code> element or via <a href="#DateRangePicker+setStartDate">setStartDate</a> or
|
|
270
|
+
<a href="#DateRangePicker+setRange">setRange</a> and date is not valid due to.<br>
|
|
271
|
+
<code>minDate</code>, <code>maxDate</code>, <code>minSpan</code>, <code>maxSpan</code>, <code>invalidDate</code> and <code>invalidTime</code> constraints.<br>
|
|
272
|
+
Event is only triggered when date string is valid and date value is changing<br></p>
|
|
270
273
|
</dd>
|
|
271
274
|
<dt><a href="#event_beforeRenderCalendar.daterangepicker">"beforeRenderCalendar.daterangepicker" (this)</a></dt>
|
|
272
275
|
<dd><p>Emitted before the calendar is rendered.
|
|
@@ -322,7 +325,8 @@ use <a href="#event_timeChange.daterangepicker">"timeChange.daterangepicker
|
|
|
322
325
|
<dd><p>Options for DateRangePicker</p>
|
|
323
326
|
</dd>
|
|
324
327
|
<dt><a href="#Ranges">Ranges</a> : <code>Object</code></dt>
|
|
325
|
-
<dd><p>A set of predefined ranges
|
|
328
|
+
<dd><p>A set of predefined ranges.<br>
|
|
329
|
+
Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <code>minSpan</code>, <code>maxSpan</code> or <code>timePickerStepSize </code> constraints.</p>
|
|
326
330
|
</dd>
|
|
327
331
|
<dt><a href="#Range">Range</a> : <code>Object</code></dt>
|
|
328
332
|
<dd><p>A single predefined range</p>
|
|
@@ -341,10 +345,12 @@ use <a href="#event_timeChange.daterangepicker">"timeChange.daterangepicker
|
|
|
341
345
|
* [DateRangePicker](#DateRangePicker)
|
|
342
346
|
* [new DateRangePicker(element, options, cb)](#new_DateRangePicker_new)
|
|
343
347
|
* _instance_
|
|
344
|
-
* [.setStartDate(startDate,
|
|
345
|
-
* [.setEndDate(endDate,
|
|
346
|
-
* [.
|
|
347
|
-
* [.
|
|
348
|
+
* [.setStartDate(startDate, updateView)](#DateRangePicker+setStartDate) ⇒ [<code>InputViolation</code>](#InputViolation)
|
|
349
|
+
* [.setEndDate(endDate, updateView)](#DateRangePicker+setEndDate) ⇒ [<code>InputViolation</code>](#InputViolation)
|
|
350
|
+
* [.setRange(startDate, endDate, updateView)](#DateRangePicker+setRange) ⇒ [<code>InputViolation</code>](#InputViolation)
|
|
351
|
+
* [.parseDate(value)](#DateRangePicker+parseDate) ⇒ [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
|
|
352
|
+
* [.formatDate(date, format)](#DateRangePicker+formatDate) ⇒ <code>string</code>
|
|
353
|
+
* [.validateInput([startDate, endDate], dipatch)](#DateRangePicker+validateInput) ⇒ [<code>InputViolation</code>](#InputViolation) \| <code>null</code>
|
|
348
354
|
* [.updateView()](#DateRangePicker+updateView)
|
|
349
355
|
* [.show()](#DateRangePicker+show)
|
|
350
356
|
* [.hide()](#DateRangePicker+hide)
|
|
@@ -369,106 +375,137 @@ use <a href="#event_timeChange.daterangepicker">"timeChange.daterangepicker
|
|
|
369
375
|
|
|
370
376
|
<a name="DateRangePicker+setStartDate"></a>
|
|
371
377
|
|
|
372
|
-
### dateRangePicker.setStartDate(startDate,
|
|
373
|
-
Sets the date range picker's currently selected start date to the provided date.<br
|
|
374
|
-
`startDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or
|
|
375
|
-
|
|
376
|
-
The value of the attached `<input>` element is also updated.
|
|
377
|
-
Date value is rounded to match option `timePickerStepSize` unless skipped by `violated.daterangepicker` event handler.<br/>
|
|
378
|
-
If the `startDate` does not fall into `minDate` and `maxDate` then `startDate` is shifted unless skipped by `violated.daterangepicker` event handler.
|
|
378
|
+
### dateRangePicker.setStartDate(startDate, updateView) ⇒ [<code>InputViolation</code>](#InputViolation)
|
|
379
|
+
Sets the date range picker's currently selected start date to the provided date.<br>
|
|
380
|
+
`startDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or a string matching `locale.format`.<br>
|
|
381
|
+
Invalid date values are handled by [violated](#DateRangePicker+violated) Event
|
|
379
382
|
|
|
380
383
|
**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
|
|
381
|
-
**
|
|
382
|
-
|
|
383
|
-
- `RangeError` for invalid date values.
|
|
384
|
-
|
|
384
|
+
**Returns**: [<code>InputViolation</code>](#InputViolation) - - Object of violations or `null` if no violation have been found
|
|
385
385
|
|
|
386
386
|
| Param | Type | Default | Description |
|
|
387
387
|
| --- | --- | --- | --- |
|
|
388
|
-
| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | | startDate to be set |
|
|
389
|
-
|
|
|
388
|
+
| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | | startDate to be set. In case of ranges, the current `endDate` is used. |
|
|
389
|
+
| updateView | <code>boolean</code> | <code>true</code> | If `true`, then calendar UI is updated to new value. Otherwise only internal values are set. |
|
|
390
390
|
|
|
391
391
|
**Example**
|
|
392
392
|
```js
|
|
393
|
-
const DateTime = luxon.DateTime;
|
|
394
393
|
const drp = $('#picker').data('daterangepicker');
|
|
395
394
|
drp.setStartDate(DateTime.now().startOf('hour'));
|
|
396
395
|
```
|
|
397
396
|
<a name="DateRangePicker+setEndDate"></a>
|
|
398
397
|
|
|
399
|
-
### dateRangePicker.setEndDate(endDate,
|
|
400
|
-
Sets the date range picker's currently selected
|
|
401
|
-
`endDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or
|
|
402
|
-
|
|
403
|
-
The value of the attached `<input>` element is also updated.
|
|
404
|
-
Date value is rounded to match option `timePickerStepSize` unless skipped by `violated.daterangepicker` event handler.<br/>
|
|
405
|
-
If the `endDate` does not fall into `minDate` and `maxDate` or into `minSpan` and `maxSpan`
|
|
406
|
-
then `endDate` is shifted unless skipped by `violated.daterangepicker` event handler
|
|
398
|
+
### dateRangePicker.setEndDate(endDate, updateView) ⇒ [<code>InputViolation</code>](#InputViolation)
|
|
399
|
+
Sets the date range picker's currently selected start date to the provided date.<br>
|
|
400
|
+
`endDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or a string matching `locale.format`.<br>
|
|
401
|
+
Invalid date values are handled by [violated](#DateRangePicker+violated) Event
|
|
407
402
|
|
|
408
403
|
**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
|
|
409
|
-
**
|
|
410
|
-
|
|
411
|
-
- `RangeError` for invalid date values.
|
|
412
|
-
|
|
404
|
+
**Returns**: [<code>InputViolation</code>](#InputViolation) - - Object of violations or `null` if no violation have been found
|
|
413
405
|
|
|
414
406
|
| Param | Type | Default | Description |
|
|
415
407
|
| --- | --- | --- | --- |
|
|
416
|
-
| endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | | endDate to be set |
|
|
417
|
-
|
|
|
408
|
+
| endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | | endDate to be set. In case of ranges, the current `startDate` is used. |
|
|
409
|
+
| updateView | <code>boolean</code> | <code>true</code> | If `true`, then calendar UI is updated to new value. Otherwise only internal values are set. |
|
|
418
410
|
|
|
419
411
|
**Example**
|
|
420
412
|
```js
|
|
421
413
|
const drp = $('#picker').data('daterangepicker');
|
|
422
|
-
drp.setEndDate('
|
|
414
|
+
drp.setEndDate(DateTime.now().startOf('hour'));
|
|
423
415
|
```
|
|
424
|
-
<a name="DateRangePicker+
|
|
416
|
+
<a name="DateRangePicker+setRange"></a>
|
|
425
417
|
|
|
426
|
-
### dateRangePicker.
|
|
427
|
-
|
|
418
|
+
### dateRangePicker.setRange(startDate, endDate, updateView) ⇒ [<code>InputViolation</code>](#InputViolation)
|
|
419
|
+
Sets the date range picker's currently selected start date to the provided date.<br>
|
|
420
|
+
`startDate` and `endDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or a string matching `locale.format`.<br>
|
|
421
|
+
Invalid date values are handled by [violated](#DateRangePicker+violated) Event
|
|
428
422
|
|
|
429
423
|
**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
|
|
430
|
-
**
|
|
431
|
-
|
|
432
|
-
- `RangeError` for invalid date values.
|
|
433
|
-
|
|
424
|
+
**Returns**: [<code>InputViolation</code>](#InputViolation) - - Object of violations or `null` if no violation have been found
|
|
434
425
|
|
|
435
426
|
| Param | Type | Default | Description |
|
|
436
427
|
| --- | --- | --- | --- |
|
|
437
428
|
| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | | startDate to be set |
|
|
438
429
|
| endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | | endDate to be set |
|
|
439
|
-
|
|
|
430
|
+
| updateView | <code>boolean</code> | <code>true</code> | If `true`, then calendar UI is updated to new value. Otherwise only internal values are set. |
|
|
440
431
|
|
|
441
432
|
**Example**
|
|
442
433
|
```js
|
|
443
|
-
const DateTime = luxon.DateTime;
|
|
444
434
|
const drp = $('#picker').data('daterangepicker');
|
|
445
|
-
drp.
|
|
435
|
+
drp.setRange(DateTime.now().startOf('hour'), DateTime.now().endOf('day'));
|
|
446
436
|
```
|
|
447
|
-
<a name="DateRangePicker+
|
|
437
|
+
<a name="DateRangePicker+parseDate"></a>
|
|
448
438
|
|
|
449
|
-
### dateRangePicker.
|
|
450
|
-
|
|
451
|
-
`minSpan`, `maxSpan`, `invalidDate` and `invalidTime` and corrects them, if needed.
|
|
452
|
-
Correction can be skipped by returning `true` at event listener for `violated.daterangepicker`
|
|
439
|
+
### dateRangePicker.parseDate(value) ⇒ [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
|
|
440
|
+
Parse date value
|
|
453
441
|
|
|
454
442
|
**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
|
|
455
|
-
**Returns**: <code>
|
|
456
|
-
**Emits**: <code>event:"violated.daterangepicker"</code>
|
|
443
|
+
**Returns**: [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) - - DateTime object
|
|
457
444
|
|
|
458
445
|
| Param | Type | Description |
|
|
459
446
|
| --- | --- | --- |
|
|
460
|
-
|
|
|
447
|
+
| value | <code>sting</code> \| [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| <code>Date</code> | The value to be parsed |
|
|
448
|
+
|
|
449
|
+
<a name="DateRangePicker+formatDate"></a>
|
|
450
|
+
|
|
451
|
+
### dateRangePicker.formatDate(date, format) ⇒ <code>string</code>
|
|
452
|
+
Format a DateTime object
|
|
453
|
+
|
|
454
|
+
**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
|
|
455
|
+
**Returns**: <code>string</code> - - Formatted date string
|
|
456
|
+
|
|
457
|
+
| Param | Type | Default | Description |
|
|
458
|
+
| --- | --- | --- | --- |
|
|
459
|
+
| date | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | | The DateTime to format |
|
|
460
|
+
| format | <code>object</code> \| <code>string</code> | <code>this.locale.format</code> | The format option |
|
|
461
|
+
|
|
462
|
+
<a name="DateRangePicker+validateInput"></a>
|
|
463
|
+
|
|
464
|
+
### dateRangePicker.validateInput([startDate, endDate], dipatch) ⇒ [<code>InputViolation</code>](#InputViolation) \| <code>null</code>
|
|
465
|
+
Validate `startDate` and `endDate` against `timePickerStepSize`, `minDate`, `maxDate`,
|
|
466
|
+
`minSpan`, `maxSpan`, `invalidDate` and `invalidTime`.
|
|
467
|
+
|
|
468
|
+
**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
|
|
469
|
+
**Returns**: [<code>InputViolation</code>](#InputViolation) \| <code>null</code> - - Object of violations and corrected values or `null` if no violation have been found
|
|
470
|
+
**Emits**: <code>event:"violated.daterangepicker"</code>
|
|
471
|
+
|
|
472
|
+
| Param | Type | Default | Description |
|
|
473
|
+
| --- | --- | --- | --- |
|
|
474
|
+
| [startDate, endDate] | <code>Array</code> | | Range to be checked, defaults to current `startDate` and `endDate` |
|
|
475
|
+
| dipatch | <code>boolean</code> | <code>false</code> | If 'true' then event "violated.daterangepicker" is dispated.<br> If eventHandler returns `true`, then `null` is returned, otherwiese the object of violations. |
|
|
461
476
|
|
|
462
477
|
**Example**
|
|
463
478
|
```js
|
|
464
|
-
|
|
465
|
-
|
|
479
|
+
options => {
|
|
480
|
+
minDate: DateTime.now().minus({months: 3}).startOf('day'),
|
|
481
|
+
maxDate: DateTime.now().minus({day: 3}).startOf('day'),
|
|
482
|
+
minSpan: Duration.fromObject({days: 7}),
|
|
483
|
+
maxSpan: Duration.fromObject({days: 70}),
|
|
484
|
+
timePickerStepSize: Duration.fromObject({hours: 1})
|
|
485
|
+
}
|
|
486
|
+
const result = validateInput(DateTime.now(), DateTime.now().plus({day: 3}));
|
|
487
|
+
|
|
488
|
+
result => {
|
|
489
|
+
startDate: {
|
|
490
|
+
violations: [
|
|
491
|
+
{ old: "2026-03-13T10:35:52", reason: "timePickerStepSize", new: "2026-03-13T11:00:00" },
|
|
492
|
+
{ old: "2026-03-13T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" }
|
|
493
|
+
]
|
|
494
|
+
},
|
|
495
|
+
endDate: {
|
|
496
|
+
violations: [
|
|
497
|
+
{ old: "2026-03-16T10:35:52", reason: "stepSize", new: "2026-03-16T11:00:00" },
|
|
498
|
+
{ old: "2026-03-16T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" },
|
|
499
|
+
{ old: "2026-03-10T00:00:00", reason: "minSpan", new: "2026-03-17T00:00:00" }
|
|
500
|
+
]
|
|
501
|
+
}
|
|
502
|
+
}
|
|
466
503
|
```
|
|
467
504
|
<a name="DateRangePicker+updateView"></a>
|
|
468
505
|
|
|
469
506
|
### dateRangePicker.updateView()
|
|
470
507
|
Updates the picker when calendar is initiated or any date has been selected.
|
|
471
|
-
Could be useful after running [setStartDate](#DateRangePicker+setStartDate) or [
|
|
508
|
+
Could be useful after running [setStartDate](#DateRangePicker+setStartDate) or [setRange](#DateRangePicker+setEndDate)
|
|
472
509
|
|
|
473
510
|
**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
|
|
474
511
|
**Emits**: <code>event:"beforeRenderTimePicker.daterangepicker"</code>
|
|
@@ -536,29 +573,48 @@ Initiate a new DateRangePicker
|
|
|
536
573
|
| Param | Type | Description |
|
|
537
574
|
| --- | --- | --- |
|
|
538
575
|
| options | [<code>Options</code>](#Options) | Object to configure the DateRangePicker |
|
|
539
|
-
| callback | [<code>callback</code>](#callback) | Callback function executed when date is changed.<br
|
|
576
|
+
| callback | [<code>callback</code>](#callback) | Callback function executed when date is changed.<br> Callback function is executed if selected date values has changed, before picker is hidden and before the attached `<input>` element is updated. As alternative listen to the ["apply.daterangepicker"](#event_apply.daterangepicker) event |
|
|
540
577
|
|
|
541
578
|
<a name="event_violated.daterangepicker"></a>
|
|
542
579
|
|
|
543
|
-
## "violated.daterangepicker" (this, result) ⇒ <code>boolean</code>
|
|
544
|
-
Emitted
|
|
580
|
+
## "violated.daterangepicker" (this, picker, result, newDate) ⇒ <code>boolean</code>
|
|
581
|
+
Emitted when the date is changed through `<input>` element or via [setStartDate](#DateRangePicker+setStartDate) or
|
|
582
|
+
[setRange](#DateRangePicker+setRange) and date is not valid due to.<br>
|
|
583
|
+
`minDate`, `maxDate`, `minSpan`, `maxSpan`, `invalidDate` and `invalidTime` constraints.<br>
|
|
584
|
+
Event is only triggered when date string is valid and date value is changing<br>
|
|
545
585
|
|
|
546
586
|
**Kind**: event emitted
|
|
547
|
-
**Returns**: <code>boolean</code> -
|
|
587
|
+
**Returns**: <code>boolean</code> - =undefined - If handler returns `true`, then values from `newDate` object are used
|
|
548
588
|
|
|
549
589
|
| Param | Type | Description |
|
|
550
590
|
| --- | --- | --- |
|
|
551
|
-
| this |
|
|
552
|
-
|
|
|
591
|
+
| this | <code>Object</code> | The event object |
|
|
592
|
+
| picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
|
|
593
|
+
| result | [<code>InputViolation</code>](#InputViolation) | The violation object, see example of `validateInput()` |
|
|
594
|
+
| newDate | <code>Object</code> | Object of {startDate, endDate} |
|
|
553
595
|
|
|
554
596
|
**Example**
|
|
555
597
|
```js
|
|
556
|
-
$('#picker').
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
598
|
+
$('#picker').daterangepicker({
|
|
599
|
+
startDate: DateTime.now(),
|
|
600
|
+
// allow only dates from current year
|
|
601
|
+
minDate: DateTime.now().startOf('year'),
|
|
602
|
+
manDate: DateTime.now().endOf('year'),
|
|
603
|
+
singleDatePicker: true,
|
|
604
|
+
locale: {
|
|
605
|
+
format: DateTime.DATETIME_SHORT
|
|
560
606
|
}
|
|
561
|
-
})
|
|
607
|
+
}).on('violated.daterangepicker', (ev, picker, result, newDate) => {
|
|
608
|
+
newDate.startDate = DateTime.now().minus({ days: 3 }).startOf('day');
|
|
609
|
+
return true;
|
|
610
|
+
});
|
|
611
|
+
|
|
612
|
+
// Try to set date outside permitted range at <input> elemet
|
|
613
|
+
$('#picker').val(DateTime.now().minus({ years: 10 })).toLocaleString(DateTime.DATETIME_SHORT).trigger('keyup');
|
|
614
|
+
// Try to set date outside permitted range by code
|
|
615
|
+
const drp = $('#picker').data('daterangepicker').setStartDate(DateTime.now().minus({ years: 10 })
|
|
616
|
+
|
|
617
|
+
-> Calendar selects and shows "today - 3 days"
|
|
562
618
|
```
|
|
563
619
|
<a name="event_beforeRenderCalendar.daterangepicker"></a>
|
|
564
620
|
|
|
@@ -723,65 +779,67 @@ Options for DateRangePicker
|
|
|
723
779
|
| Name | Type | Default | Description |
|
|
724
780
|
| --- | --- | --- | --- |
|
|
725
781
|
| parentEl | <code>string</code> | <code>"body"</code> | [jQuery selector](https://api.jquery.com/category/selectors/) of the parent element that the date range picker will be added to |
|
|
726
|
-
| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | Default: `DateTime.now().startOf('day')`<br
|
|
727
|
-
| endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | | Defautl: `DateTime.now().endOf('day')`<br
|
|
728
|
-
| minDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | The earliest date a user may select or `null` for no limit.<br
|
|
729
|
-
| maxDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | The latest date a user may select or `null` for no limit.<br
|
|
730
|
-
| minSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The minimum span between the selected start and end dates.<br
|
|
731
|
-
| maxSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The maximum span between the selected start and end dates.<br
|
|
732
|
-
| defaultSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The span which is used when endDate is automatically updated due to wrong user input<br
|
|
733
|
-
| initalMonth | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | Default: `DateTime.now().startOf('month')`<br
|
|
734
|
-
| autoApply | <code>boolean</code> | <code>false</code> | Hide the `Apply` and `Cancel` buttons, and automatically apply a new date range as soon as two dates are clicked.<br
|
|
735
|
-
| singleDatePicker | <code>boolean</code> | <code>false</code> | Show only a single calendar to choose one date, instead of a range picker with two calendars.<br
|
|
736
|
-
| singleMonthView | <code>boolean</code> | <code>false</code> | Show only a single month calendar, useful when selected ranges are usually short<br
|
|
782
|
+
| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | Default: `DateTime.now().startOf('day')`<br>The beginning date of the initially selected date range.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Date value is rounded to match option `timePickerStepSize`<br> Option `isInvalidDate` and `isInvalidTime` are not evaluated, you may set date/time which is not selectable in calendar.<br> If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br> Use `startDate: null` to show calendar without an inital selected date. |
|
|
783
|
+
| endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | | Defautl: `DateTime.now().endOf('day')`<br>The end date of the initially selected date range.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Date value is rounded to match option `timePickerStepSize`<br> Option `isInvalidDate`, `isInvalidTime` and `minSpan`, `maxSpan` are not evaluated, you may set date/time which is not selectable in calendar.<br> If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br> |
|
|
784
|
+
| minDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | The earliest date a user may select or `null` for no limit.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`. |
|
|
785
|
+
| maxDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | The latest date a user may select or `null` for no limit.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`. |
|
|
786
|
+
| minSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The minimum span between the selected start and end dates.<br> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Ignored when `singleDatePicker: true` |
|
|
787
|
+
| maxSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The maximum span between the selected start and end dates.<br> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Ignored when `singleDatePicker: true` |
|
|
788
|
+
| defaultSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The span which is used when endDate is automatically updated due to wrong user input<br> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Ignored when `singleDatePicker: true`. Not relevant if `minSpan: null` |
|
|
789
|
+
| initalMonth | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | Default: `DateTime.now().startOf('month')`<br> The inital month shown when `startDate: null`. Be aware, the attached `<input>` element must be also empty.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> When `initalMonth` is used, then `endDate` is ignored and it works only with `timePicker: false` |
|
|
790
|
+
| autoApply | <code>boolean</code> | <code>false</code> | Hide the `Apply` and `Cancel` buttons, and automatically apply a new date range as soon as two dates are clicked.<br> Only useful when `timePicker: false` |
|
|
791
|
+
| singleDatePicker | <code>boolean</code> | <code>false</code> | Show only a single calendar to choose one date, instead of a range picker with two calendars.<br> If `true`, then `endDate` is always `null`. |
|
|
792
|
+
| singleMonthView | <code>boolean</code> | <code>false</code> | Show only a single month calendar, useful when selected ranges are usually short<br> or for smaller viewports like mobile devices.<br> Ignored for `singleDatePicker: true`. |
|
|
737
793
|
| showDropdowns | <code>boolean</code> | <code>false</code> | Show year and month select boxes above calendars to jump to a specific month and year |
|
|
738
|
-
| minYear | <code>number</code> | | Default: `DateTime.now().minus({year:100}).year`<br
|
|
739
|
-
| maxYear | <code>number</code> | | Default: `DateTime.now().plus({year:100}).year`<br
|
|
794
|
+
| minYear | <code>number</code> | | Default: `DateTime.now().minus({year:100}).year`<br>The minimum year shown in the dropdowns when `showDropdowns: true` |
|
|
795
|
+
| maxYear | <code>number</code> | | Default: `DateTime.now().plus({year:100}).year`<br>The maximum year shown in the dropdowns when `showDropdowns: true` |
|
|
740
796
|
| showWeekNumbers | <code>boolean</code> | <code>false</code> | Show **localized** week numbers at the start of each week on the calendars |
|
|
741
|
-
| showISOWeekNumbers | <code>boolean</code> | <code>false</code> | Show **ISO** week numbers at the start of each week on the calendars.<br
|
|
797
|
+
| showISOWeekNumbers | <code>boolean</code> | <code>false</code> | Show **ISO** week numbers at the start of each week on the calendars.<br> Takes precedence over localized `showWeekNumbers` |
|
|
742
798
|
| timePicker | <code>boolean</code> | <code>false</code> | Adds select boxes to choose times in addition to dates |
|
|
743
|
-
| timePicker24Hour | <code>boolean</code> | <code>true|false</code> | Use 24-hour instead of 12-hour times, removing the AM/PM selection.<br
|
|
744
|
-
| timePickerStepSize | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> | | Default: `Duration.fromObject({minutes:1})`<br
|
|
745
|
-
| timePickerSeconds | <code>boolean</code> | <code>boolean</code> | **Deprecated**, use `timePickerStepSize`<br
|
|
746
|
-
| timePickerIncrement | <code>boolean</code> | <code>1</code> | **Deprecated**, use `timePickerStepSize`<br
|
|
747
|
-
| autoUpdateInput | <code>boolean</code> | <code>true</code> | Indicates whether the date range picker should instantly update the value of the attached `<input>` element when the selected dates change.<br
|
|
799
|
+
| timePicker24Hour | <code>boolean</code> | <code>true|false</code> | Use 24-hour instead of 12-hour times, removing the AM/PM selection.<br> Default is derived from current locale [Intl.DateTimeFormat.resolvedOptions.hour12](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions#hour12). |
|
|
800
|
+
| timePickerStepSize | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> | | Default: `Duration.fromObject({minutes:1})`<br>Set the time picker step size.<br> Must be a `luxon.Duration` or the number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Valid values are 1,2,3,4,5,6,10,12,15,20,30 for `Duration.fromObject({seconds: ...})` and `Duration.fromObject({minutes: ...})` and 1,2,3,4,6,(8,12) for `Duration.fromObject({hours: ...})`.<br> Duration must be greater than `minSpan` and smaller than `maxSpan`.<br> For example `timePickerStepSize: 600` will disable time picker seconds and time picker minutes are set to step size of 10 Minutes.<br> Overwrites `timePickerIncrement` and `timePickerSeconds`, ignored when `timePicker: false` |
|
|
801
|
+
| timePickerSeconds | <code>boolean</code> | <code>boolean</code> | **Deprecated**, use `timePickerStepSize`<br>Show seconds in the timePicker |
|
|
802
|
+
| timePickerIncrement | <code>boolean</code> | <code>1</code> | **Deprecated**, use `timePickerStepSize`<br>Increment of the minutes selection list for times |
|
|
803
|
+
| autoUpdateInput | <code>boolean</code> | <code>true</code> | Indicates whether the date range picker should instantly update the value of the attached `<input>` element when the selected dates change.<br>The `<input>` element will be always updated on `Apply` and reverted when user clicks on `Cancel`. |
|
|
748
804
|
| onOutsideClick | <code>string</code> | <code>"apply"</code> | Defines what picker shall do when user clicks outside the calendar. `'apply'` or `'cancel'`. Event [onOutsideClick.daterangepicker](#event_outsideClick.daterangepicker) is always emitted. |
|
|
749
|
-
| linkedCalendars | <code>boolean</code> | <code>true</code> | When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars.<br
|
|
750
|
-
| isInvalidDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed,<br
|
|
751
|
-
| isInvalidTime | <code>function</code> | <code>false</code> | A function that is passed each hour/minute/second/am-pm in the two calendars before they are displayed,<br
|
|
752
|
-
| isCustomDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell.<br
|
|
753
|
-
| altInput | <code>string</code> \| <code>Array</code> | <code>null</code> | A [jQuery selector](https://api.jquery.com/category/selectors/) string for an alternative output (typically hidden) `<input>` element. Uses `altFormat` to format the value.<br
|
|
754
|
-
| altFormat | <code>function</code> \| <code>string</code> | | The output format used for `altInput`.<br
|
|
805
|
+
| linkedCalendars | <code>boolean</code> | <code>true</code> | When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars.<br> When disabled, the two calendars can be individually advanced and display any month/year |
|
|
806
|
+
| isInvalidDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed,<br> and may return `true` or `false` to indicate whether that date should be available for selection or not.<br> Signature: `isInvalidDate(date)`<br> |
|
|
807
|
+
| isInvalidTime | <code>function</code> | <code>false</code> | A function that is passed each hour/minute/second/am-pm in the two calendars before they are displayed,<br> and may return `true` or `false` to indicate whether that date should be available for selection or not.<br> Signature: `isInvalidTime(time, side, unit)`<br> `side` is `'start'` or `'end'` or `null` for `singleDatePicker: true`<br> `unit` is `'hour'`, `'minute'`, `'second'` or `'ampm'`<br> Hours are always given as 24-hour clock<br> Ensure that your function returns `false` for at least one item. Otherwise the calender is not rendered.<br> |
|
|
808
|
+
| isCustomDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell.<br> Signature: `isCustomDate(date)` |
|
|
809
|
+
| altInput | <code>string</code> \| <code>Array</code> | <code>null</code> | A [jQuery selector](https://api.jquery.com/category/selectors/) string for an alternative output (typically hidden) `<input>` element. Uses `altFormat` to format the value.<br> Must be a single string for `singleDatePicker: true` or an array of two strings for `singleDatePicker: false`<br> Example: `['#start', '#end']` |
|
|
810
|
+
| altFormat | <code>function</code> \| <code>string</code> | | The output format used for `altInput`.<br> Default: ISO-8601 basic format without time zone, precisison is derived from `timePicker` and `timePickerStepSize`<br> Example `yyyyMMdd'T'HHmm` for `timePicker=true` and display of Minutes<br> If defined, either a string used with [Format tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or a function.<br> Examples: `"yyyy:MM:dd'T'HH:mm"`,<br>`(date) => date.toUnixInteger()` |
|
|
755
811
|
| ~~warnings~~ | <code>boolean</code> | | Not used anymore. Listen to event `violated.daterangepicker` to react on invalid input data |
|
|
756
812
|
| applyButtonClasses | <code>string</code> | <code>"btn-primary"</code> | CSS class names that will be added only to the apply button |
|
|
757
813
|
| cancelButtonClasses | <code>string</code> | <code>"btn-default"</code> | CSS class names that will be added only to the cancel button |
|
|
758
|
-
| buttonClasses | <code>string</code> | | Default: `'btn btn-sm'`<br
|
|
759
|
-
| weekendClasses | <code>string</code> | <code>"weekend"</code> | CSS class names that will be used to highlight weekend days.<br
|
|
760
|
-
| weekendDayClasses | <code>string</code> | <code>"weekend-day"</code> | CSS class names that will be used to highlight weekend day names.<br
|
|
761
|
-
| todayClasses | <code>string</code> | <code>"today"</code> | CSS class names that will be used to highlight the current day.<br
|
|
814
|
+
| buttonClasses | <code>string</code> | | Default: `'btn btn-sm'`<br>CSS class names that will be added to both the apply and cancel buttons. |
|
|
815
|
+
| weekendClasses | <code>string</code> | <code>"weekend"</code> | CSS class names that will be used to highlight weekend days.<br> Use `null` or empty string if you don't like to highlight weekend days. |
|
|
816
|
+
| weekendDayClasses | <code>string</code> | <code>"weekend-day"</code> | CSS class names that will be used to highlight weekend day names.<br> Weekend days are evaluated by [Info.getWeekendWeekdays](https://moment.github.io/luxon/api-docs/index.html#infogetweekendweekdays) and depend on current locale settings. Use `null` or empty string if you don't like to highlight weekend day names. |
|
|
817
|
+
| todayClasses | <code>string</code> | <code>"today"</code> | CSS class names that will be used to highlight the current day.<br> Use `null` or empty string if you don't like to highlight the current day. |
|
|
762
818
|
| externalStyle | <code>string</code> | <code>null</code> | External CSS Framework to style the picker. Currently only `'bulma'` is supported. |
|
|
763
|
-
| opens | <code>string</code> | <code>"right"</code> | Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to.<br
|
|
764
|
-
| drops | <code>string</code> | <code>"down"</code> | Whether the picker appears below or above the HTML element it's attached to.<br
|
|
819
|
+
| opens | <code>string</code> | <code>"right"</code> | Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to.<br> `'left' \| 'right' \| 'center'` |
|
|
820
|
+
| drops | <code>string</code> | <code>"down"</code> | Whether the picker appears below or above the HTML element it's attached to.<br> `'down' \| 'up' \| 'auto'` |
|
|
765
821
|
| ranges | <code>object</code> | <code>{}</code> | Set predefined date [Ranges](#Ranges) the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range. |
|
|
766
|
-
| showCustomRangeLabel | <code>boolean</code> | <code>true</code> | Displays "Custom Range" at the end of the list of predefined [Ranges](#Ranges), when the ranges option is used.<br> This option will be highlighted whenever the current date range selection does not match one of the predefined ranges.<br
|
|
767
|
-
| alwaysShowCalendars | <code>boolean</code> | <code>false</code> | Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range".<br
|
|
822
|
+
| showCustomRangeLabel | <code>boolean</code> | <code>true</code> | Displays "Custom Range" at the end of the list of predefined [Ranges](#Ranges), when the ranges option is used.<br> This option will be highlighted whenever the current date range selection does not match one of the predefined ranges.<br> Clicking it will display the calendars to select a new range. |
|
|
823
|
+
| alwaysShowCalendars | <code>boolean</code> | <code>false</code> | Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range".<br> When this option is set to true, the calendars for choosing a custom date range are always shown instead. |
|
|
824
|
+
| showLabel= | <code>boolean</code> | | Shows selected range next to Apply buttons.<br> Defaults to `false` if anchor element is `<input type="text">`, otherwise `true` |
|
|
768
825
|
| locale | <code>object</code> | <code>{}</code> | Allows you to provide localized strings for buttons and labels, customize the date format, and change the first day of week for the calendars. |
|
|
769
826
|
| locale.direction | <code>string</code> | <code>"ltr"</code> | Direction of reading, `'ltr'` or `'rtl'` |
|
|
770
|
-
| locale.format | <code>object</code> \| <code>string</code> | | Default: `DateTime.DATE_SHORT` or `DateTime.DATETIME_SHORT` when `timePicker: true`<br
|
|
771
|
-
| locale.separator | <code>string</code> | | Defaut: `' - '`<br
|
|
827
|
+
| locale.format | <code>object</code> \| <code>string</code> | | Default: `DateTime.DATE_SHORT` or `DateTime.DATETIME_SHORT` when `timePicker: true`<br>Date formats. Either given as string, see [Format Tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or an object according to [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)<br> I recommend to use the luxon [Presets](https://moment.github.io/luxon/#/formatting?id=presets). |
|
|
828
|
+
| locale.separator | <code>string</code> | | Defaut: `' - '`<br>Separator for start and end time |
|
|
772
829
|
| locale.weekLabel | <code>string</code> | <code>"W"</code> | Label for week numbers |
|
|
773
|
-
| locale.daysOfWeek | <code>Array</code> | | Default: `luxon.Info.weekdays('short')`<br
|
|
774
|
-
| locale.monthNames | <code>Array</code> | | Default: `luxon.Info.months('long')`<br
|
|
775
|
-
| locale.firstDay | <code>number</code> | | Default: `luxon.Info.getStartOfWeek()`<br
|
|
830
|
+
| locale.daysOfWeek | <code>Array</code> | | Default: `luxon.Info.weekdays('short')`<br>Array with weekday names, from Monday to Sunday |
|
|
831
|
+
| locale.monthNames | <code>Array</code> | | Default: `luxon.Info.months('long')`<br>Array with month names |
|
|
832
|
+
| locale.firstDay | <code>number</code> | | Default: `luxon.Info.getStartOfWeek()`<br>First day of the week, 1 for Monday through 7 for Sunday |
|
|
776
833
|
| locale.applyLabel | <code>string</code> | <code>"Apply"</code> | Label of `Apply` Button |
|
|
777
834
|
| locale.cancelLabel | <code>string</code> | <code>"Cancel"</code> | Label of `Cancel` Button |
|
|
778
835
|
| locale.customRangeLabel | <code>string</code> | <code>"Custom"</code> | Range - Title for custom ranges |
|
|
779
|
-
| locale.durationFormat | <code>object</code> \| <code>string</code> \| <code>function</code> | <code>{}</code> | Format a custom label for selected duration, for example `'5 Days, 12 Hours'`.<br
|
|
836
|
+
| locale.durationFormat | <code>object</code> \| <code>string</code> \| <code>function</code> | <code>{}</code> | Format a custom label for selected duration, for example `'5 Days, 12 Hours'`.<br> Define the format either as string, see [Duration.toFormat - Format Tokens](https://moment.github.io/luxon/api-docs/index.html#durationtoformat) or an object according to [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options), see [Duration.toHuamn](https://moment.github.io/luxon/api-docs/index.html#durationtohuman).<br> Or custom function as `(startDate, endDate) => {}` |
|
|
780
837
|
|
|
781
838
|
<a name="Ranges"></a>
|
|
782
839
|
|
|
783
840
|
## Ranges : <code>Object</code>
|
|
784
|
-
A set of predefined ranges
|
|
841
|
+
A set of predefined ranges.<br>
|
|
842
|
+
Ranges are not validated against `minDate`, `maxDate`, `minSpan`, `maxSpan` or `timePickerStepSize ` constraints.
|
|
785
843
|
|
|
786
844
|
**Kind**: global typedef
|
|
787
845
|
**Properties**
|
|
@@ -789,7 +847,7 @@ A set of predefined ranges
|
|
|
789
847
|
| Name | Type | Description |
|
|
790
848
|
| --- | --- | --- |
|
|
791
849
|
| name | <code>string</code> | The name of the range |
|
|
792
|
-
| range | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | Array of 2 elements with startDate and endDate |
|
|
850
|
+
| range | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | Array of 2 elements with `startDate` and `endDate` |
|
|
793
851
|
|
|
794
852
|
**Example**
|
|
795
853
|
```js
|
|
@@ -828,10 +886,11 @@ A single predefined range
|
|
|
828
886
|
| Name | Type | Description |
|
|
829
887
|
| --- | --- | --- |
|
|
830
888
|
| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Violation of startDate |
|
|
831
|
-
|
|
|
832
|
-
|
|
|
889
|
+
| ? | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| <code>undefined</code> | endDate - Violation of endDate, if existing |
|
|
890
|
+
| violations | <code>Array</code> | The constraints which violates the input |
|
|
891
|
+
| reason | <code>Array</code> | The type/reson of violation |
|
|
833
892
|
| old | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Old value startDate/endDate |
|
|
834
|
-
|
|
|
893
|
+
| ? | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | new - Corrected value of startDate/endDate if existing |
|
|
835
894
|
|
|
836
895
|
<a name="callback"></a>
|
|
837
896
|
|