@wernfried/daterangepicker 4.15.0 → 4.16.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 CHANGED
@@ -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 if the input values are not compliant to all constraints</p>
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>&lt;input&gt;</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">&quot;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</p>
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">&quot;timeChange.daterangepicker
341
345
  * [DateRangePicker](#DateRangePicker)
342
346
  * [new DateRangePicker(element, options, cb)](#new_DateRangePicker_new)
343
347
  * _instance_
344
- * [.setStartDate(startDate, isValid)](#DateRangePicker+setStartDate)
345
- * [.setEndDate(endDate, isValid)](#DateRangePicker+setEndDate)
346
- * [.setPeriod(startDate, endDate, isValid)](#DateRangePicker+setPeriod)
347
- * [.validateInput([range])](#DateRangePicker+validateInput) ⇒ <code>Array</code> \| <code>null</code>
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">&quot;timeChange.daterangepicker
369
375
 
370
376
  <a name="DateRangePicker+setStartDate"></a>
371
377
 
372
- ### dateRangePicker.setStartDate(startDate, isValid)
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
- a string matching `locale.format`.
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
- **Throws**:
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
- | isValid | <code>boolean</code> | <code>false</code> | If `true` then the `startDate` is not checked against `minDate` and `maxDate`<br/> Use this option only if you are sure about the value you put in. |
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, isValid)
400
- Sets the date range picker's currently selected end date to the provided date.<br/>
401
- `endDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or
402
- a string matching`locale.format`.
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
- **Throws**:
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
- | isValid | <code>boolean</code> | <code>false</code> | If `true` then the `endDate` is not checked against `minDate`, `maxDate` and `minSpan`, `maxSpan`<br/> Use this option only if you are sure about the value you put in. |
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('2025-03-28T18:30:00');
414
+ drp.setEndDate(DateTime.now().startOf('hour'));
423
415
  ```
424
- <a name="DateRangePicker+setPeriod"></a>
416
+ <a name="DateRangePicker+setRange"></a>
425
417
 
426
- ### dateRangePicker.setPeriod(startDate, endDate, isValid)
427
- Shortcut for [setStartDate](#DateRangePicker+setStartDate) and [setEndDate](#DateRangePicker+setEndDate)
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
- **Throws**:
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
- | isValid | <code>boolean</code> | <code>false</code> | If `true` then the `startDate` and `endDate` are not checked against `minDate`, `maxDate` and `minSpan`, `maxSpan`<br/> Use this option only if you are sure about the value you put in. |
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.setPeriod(DateTime.now().startOf('week'), DateTime.now().startOf('week').plus({days: 10}));
435
+ drp.setRange(DateTime.now().startOf('hour'), DateTime.now().endOf('day'));
446
436
  ```
447
- <a name="DateRangePicker+validateInput"></a>
437
+ <a name="DateRangePicker+parseDate"></a>
448
438
 
449
- ### dateRangePicker.validateInput([range]) ⇒ <code>Array</code> \| <code>null</code>
450
- Validate `startDate` and `endDate` or `range` against `timePickerStepSize`, `minDate`, `maxDate`,
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>Array</code> \| <code>null</code> - - Corrected range as array of `[startDate, endDate]` when `range` is defined
456
- **Emits**: <code>event:&quot;violated.daterangepicker&quot;</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
- | [range] | <code>Array</code> | Used to check prefefined range instead of `startDate` and `endDate` => `[name, startDate, endDate]` When set, then function does not modify anything, just returning corrected range. |
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:&quot;violated.daterangepicker&quot;</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
- validateInput([DateTime.fromISO('2025-02-03'), DateTime.fromISO('2025-02-25')]) =>
465
- [ DateTime.fromISO('2025-02-05'), DateTime.fromISO('2025-02-20'), { startDate: { violations: [{old: ..., new: ..., reasson: 'minDate'}] } } ]
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 [setEndDate](#DateRangePicker+setEndDate)
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:&quot;beforeRenderTimePicker.daterangepicker&quot;</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/> 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 |
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 if the input values are not compliant to all constraints
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> - skip - If `true`, then input values are not corrected and remain invalid
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 | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
552
- | result | [<code>InputViolation</code>](#InputViolation) | An object of input violations |
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').on('violated.daterangepicker', (ev, picker, result) => {
557
- for (let vio of result.startDate.violations ) {
558
- if (vio.reason === 'maxDate')
559
- return true; // Ignore if startDate is later than maxDate
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>&quot;body&quot;</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/>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. |
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/>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/> |
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/> 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`. |
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/> 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`. |
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/> 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` |
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/> 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` |
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/> 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` |
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/> 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` |
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/> Only useful when `timePicker: false` |
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/> The start and end dates provided to your callback will be the same single date chosen. |
736
- | 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`. |
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/>The minimum year shown in the dropdowns when `showDropdowns: true` |
739
- | maxYear | <code>number</code> | | Default: `DateTime.now().plus({year:100}).year`<br/>The maximum year shown in the dropdowns when `showDropdowns: true` |
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/> Takes precedence over localized `showWeekNumbers` |
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/> 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). |
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/>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` |
745
- | timePickerSeconds | <code>boolean</code> | <code>boolean</code> | **Deprecated**, use `timePickerStepSize`<br/>Show seconds in the timePicker |
746
- | timePickerIncrement | <code>boolean</code> | <code>1</code> | **Deprecated**, use `timePickerStepSize`<br/>Increment of the minutes selection list for times |
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/>The `<input>` element will be always updated on `Apply` and reverted when user clicks on `Cancel`. |
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>&quot;apply&quot;</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/> When disabled, the two calendars can be individually advanced and display any month/year |
750
- | 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/> Function has no effect on date values set by `startDate`, `endDate`, `ranges`, [setStartDate](#DateRangePicker+setStartDate), [setEndDate](#DateRangePicker+setEndDate). |
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/> 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/> Function has no effect on time values set by `startDate`, `endDate`, `ranges`, [setStartDate](#DateRangePicker+setStartDate), [setEndDate](#DateRangePicker+setEndDate).<br/> Ensure that your function returns `false` for at least one item. Otherwise the calender is not rendered.<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/> Signature: `isCustomDate(date)` |
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/> Must be a single string for `singleDatePicker: true` or an array of two strings for `singleDatePicker: false`<br/> Example: `['#start', '#end']` |
754
- | 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()` |
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>&quot;btn-primary&quot;</code> | CSS class names that will be added only to the apply button |
757
813
  | cancelButtonClasses | <code>string</code> | <code>&quot;btn-default&quot;</code> | CSS class names that will be added only to the cancel button |
758
- | buttonClasses | <code>string</code> | | Default: `'btn btn-sm'`<br/>CSS class names that will be added to both the apply and cancel buttons. |
759
- | weekendClasses | <code>string</code> | <code>&quot;weekend&quot;</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. |
760
- | weekendDayClasses | <code>string</code> | <code>&quot;weekend-day&quot;</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. |
761
- | todayClasses | <code>string</code> | <code>&quot;today&quot;</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. |
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>&quot;weekend&quot;</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>&quot;weekend-day&quot;</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>&quot;today&quot;</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>&quot;right&quot;</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'` |
764
- | drops | <code>string</code> | <code>&quot;down&quot;</code> | Whether the picker appears below or above the HTML element it's attached to.<br/> `'down' \| 'up' \| 'auto'` |
819
+ | opens | <code>string</code> | <code>&quot;right&quot;</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>&quot;down&quot;</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/> Clicking it will display the calendars to select a new range. |
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/> When this option is set to true, the calendars for choosing a custom date range are always shown instead. |
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>&quot;ltr&quot;</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/>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). |
771
- | locale.separator | <code>string</code> | | Defaut: `' - '`<br/>Separator for start and end time |
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>&quot;W&quot;</code> | Label for week numbers |
773
- | locale.daysOfWeek | <code>Array</code> | | Default: `luxon.Info.weekdays('short')`<br/>Array with weekday names, from Monday to Sunday |
774
- | locale.monthNames | <code>Array</code> | | Default: `luxon.Info.months('long')`<br/>Array with month names |
775
- | locale.firstDay | <code>number</code> | | Default: `luxon.Info.getStartOfWeek()`<br/>First day of the week, 1 for Monday through 7 for Sunday |
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>&quot;Apply&quot;</code> | Label of `Apply` Button |
777
834
  | locale.cancelLabel | <code>string</code> | <code>&quot;Cancel&quot;</code> | Label of `Cancel` Button |
778
835
  | locale.customRangeLabel | <code>string</code> | <code>&quot;Custom&quot;</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/> 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) => {}` |
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
- | endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| <code>undefined</code> | Violation of endDate |
832
- | reason | <code>Array</code> | The constraint which violates the input |
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
- | new | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Corrected value of startDate/endDate |
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