@wernfried/daterangepicker 4.19.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/API_Doc.md +249 -174
  2. package/README.md +134 -131
  3. package/dist/esm/daterangepicker.js +623 -495
  4. package/dist/esm/daterangepicker.min.js +1 -2
  5. package/dist/global/daterangepicker.js +644 -492
  6. package/dist/global/daterangepicker.min.js +1 -2
  7. package/package.json +3 -3
package/API_Doc.md CHANGED
@@ -3,61 +3,74 @@
3
3
  <dl>
4
4
  <dt><a href="#DateRangePicker">DateRangePicker</a></dt>
5
5
  <dd></dd>
6
+ <dt><a href="#DateRangePickerEvent">DateRangePickerEvent</a> ⇐ <code>Event</code></dt>
7
+ <dd></dd>
8
+ </dl>
9
+
10
+ ## Functions
11
+
12
+ <dl>
13
+ <dt><a href="#daterangepicker">daterangepicker(elements, options, callback)</a> ⇒ <code>HTMLElement</code> | <code>Array.&lt;HTMLElement&gt;</code></dt>
14
+ <dd><p>Initiate a new DateRangePicker</p>
15
+ </dd>
16
+ <dt><a href="#getDateRangePicker">getDateRangePicker(target)</a> ⇒ <code><a href="#DateRangePicker">DateRangePicker</a></code></dt>
17
+ <dd><p>Returns the DateRangePicker. Equivalent to <code>element._daterangepicker</code></p>
18
+ </dd>
6
19
  </dl>
7
20
 
8
21
  ## Events
9
22
 
10
23
  <dl>
11
- <dt><a href="#event_violate.daterangepicker">"violate.daterangepicker" (picker, result, newDate)</a> ⇒ <code>boolean</code></dt>
24
+ <dt><a href="#event_violate">"violate"</a></dt>
12
25
  <dd><p>Emitted when the date is changed through <code>&lt;input&gt;</code> element or via <a href="#DateRangePicker+setStartDate">setStartDate</a> or
13
26
  <a href="#DateRangePicker+setRange">setRange</a> and date is not valid due to
14
27
  <code>minDate</code>, <code>maxDate</code>, <code>minSpan</code>, <code>maxSpan</code>, <code>invalidDate</code> and <code>invalidTime</code> constraints.<br>
15
28
  Event is only triggered when date string is valid and date value is changing<br></p>
16
29
  </dd>
17
- <dt><a href="#event_beforeRenderCalendar.daterangepicker">"beforeRenderCalendar.daterangepicker" (this)</a></dt>
30
+ <dt><a href="#event_beforeRenderCalendar">"beforeRenderCalendar"</a></dt>
18
31
  <dd><p>Emitted before the calendar time picker is rendered.</p>
19
32
  </dd>
20
- <dt><a href="#event_beforeRenderCalendar.daterangepicker">"beforeRenderCalendar.daterangepicker" (this)</a></dt>
33
+ <dt><a href="#event_beforeRenderCalendar">"beforeRenderCalendar"</a></dt>
21
34
  <dd><p>Emitted before the calendar is rendered. Useful to remove any manually added elements.</p>
22
35
  </dd>
23
- <dt><a href="#event_show.daterangepicker">"show.daterangepicker" (this)</a></dt>
36
+ <dt><a href="#event_show">"show"</a></dt>
24
37
  <dd><p>Emitted when the picker is shown</p>
25
38
  </dd>
26
- <dt><a href="#event_beforeHide.daterangepicker">"beforeHide.daterangepicker" (this)</a> ⇒ <code>boolean</code></dt>
27
- <dd><p>Emitted before the picker will hide. When EventHandler returns <code>true</code>, then picker remains visible</p>
39
+ <dt><a href="#event_beforeHide">"beforeHide"</a></dt>
40
+ <dd><p>Emitted before the picker will hide.</p>
28
41
  </dd>
29
- <dt><a href="#event_hide.daterangepicker">"hide.daterangepicker" (this)</a></dt>
42
+ <dt><a href="#event_hide">"hide"</a></dt>
30
43
  <dd><p>Emitted when the picker is hidden</p>
31
44
  </dd>
32
- <dt><a href="#event_showCalendar.daterangepicker">"showCalendar.daterangepicker" (this)</a></dt>
45
+ <dt><a href="#event_showCalendar">"showCalendar"</a></dt>
33
46
  <dd><p>Emitted when the calendar(s) are shown.
34
47
  Only useful when <a href="#Ranges">Ranges</a> are used.</p>
35
48
  </dd>
36
- <dt><a href="#event_hideCalendar.daterangepicker">"hideCalendar.daterangepicker" (this)</a></dt>
49
+ <dt><a href="#event_hideCalendar">"hideCalendar"</a></dt>
37
50
  <dd><p>Emitted when the calendar(s) are hidden. Only used when <a href="#Ranges">Ranges</a> are used.</p>
38
51
  </dd>
39
- <dt><a href="#event_outsideClick.daterangepicker">"outsideClick.daterangepicker" (this)</a></dt>
52
+ <dt><a href="#event_outsideClick">"outsideClick"</a></dt>
40
53
  <dd><p>Emitted when user clicks outside the picker. Use option <code>onOutsideClick</code> to define the default action, then you may not need to handle this event.</p>
41
54
  </dd>
42
- <dt><a href="#event_dateChange.daterangepicker">"dateChange.daterangepicker" (this, side)</a></dt>
43
- <dd><p>Emitted when the date changed. Does not trigger when time is changed, use <a href="#event_timeChange.daterangepicker">&quot;timeChange.daterangepicker&quot;</a> to handle it</p>
55
+ <dt><a href="#event_dateChange">"dateChange"</a></dt>
56
+ <dd><p>Emitted when the date changed. Does not trigger when time is changed, use <a href="#event_timeChange">&quot;timeChange&quot;</a> to handle it</p>
44
57
  </dd>
45
- <dt><a href="#event_timeChange.daterangepicker">"timeChange.daterangepicker" (this, side)</a></dt>
58
+ <dt><a href="#event_timeChange">"timeChange"</a></dt>
46
59
  <dd><p>Emitted when the time changed. Does not trigger when date is changed</p>
47
60
  </dd>
48
- <dt><a href="#event_apply.daterangepicker">"apply.daterangepicker" (this)</a></dt>
61
+ <dt><a href="#event_apply">"apply"</a></dt>
49
62
  <dd><p>Emitted when the <code>Apply</code> button is clicked, or when a predefined <a href="#Ranges">Ranges</a> is clicked</p>
50
63
  </dd>
51
- <dt><a href="#event_cancel.daterangepicker">"cancel.daterangepicker" (this)</a></dt>
64
+ <dt><a href="#event_cancel">"cancel"</a></dt>
52
65
  <dd><p>Emitted when the <code>Cancel</code> button is clicked</p>
53
66
  </dd>
54
- <dt><a href="#event_inputChange.daterangepicker">"inputChange.daterangepicker" (this)</a></dt>
67
+ <dt><a href="#event_inputChange">"inputChange"</a></dt>
55
68
  <dd><p>Emitted when the date is changed through <code>&lt;input&gt;</code> element. Event is only triggered when date string is valid and date value has changed</p>
56
69
  </dd>
57
- <dt><a href="#event_monthViewChange.daterangepicker">"monthViewChange.daterangepicker" (this, left, right)</a></dt>
70
+ <dt><a href="#event_monthViewChange">"monthViewChange"</a></dt>
58
71
  <dd><p>Emitted after month view changed, for example by click on &#39;prev&#39; or &#39;next&#39;</p>
59
72
  </dd>
60
- <dt><a href="#event_beforeRenderTimePicker.daterangepicker">"beforeRenderTimePicker.daterangepicker" (this)</a></dt>
73
+ <dt><a href="#event_beforeRenderTimePicker">"beforeRenderTimePicker" (this)</a></dt>
61
74
  <dd><p>Emitted before the TimePicker is rendered.
62
75
  Useful to remove any manually added elements.</p>
63
76
  </dd>
@@ -76,7 +89,7 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
76
89
  <dt><a href="#Range">Range</a> : <code>Object</code></dt>
77
90
  <dd><p>A single predefined range</p>
78
91
  </dd>
79
- <dt><a href="#InputViolation">InputViolation</a> : <code>Object</code></dt>
92
+ <dt><a href="#NewDate">NewDate</a> : <code>Object</code></dt>
80
93
  <dd></dd>
81
94
  <dt><a href="#callback">callback</a> : <code>function</code></dt>
82
95
  <dd></dd>
@@ -89,27 +102,25 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
89
102
 
90
103
  * [DateRangePicker](#DateRangePicker)
91
104
  * [new DateRangePicker(element, options, cb)](#new_DateRangePicker_new)
92
- * _instance_
93
- * [.startDate](#DateRangePicker+startDate) : [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
94
- * [.endDate](#DateRangePicker+endDate) : [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
95
- * [.events](#DateRangePicker+events)
96
- * [.setStartDate(startDate, updateView)](#DateRangePicker+setStartDate) ⇒ [<code>InputViolation</code>](#InputViolation)
97
- * [.setEndDate(endDate, updateView)](#DateRangePicker+setEndDate) ⇒ [<code>InputViolation</code>](#InputViolation)
98
- * [.setRange(startDate, endDate, updateView)](#DateRangePicker+setRange) ⇒ [<code>InputViolation</code>](#InputViolation)
99
- * [.parseDate(value)](#DateRangePicker+parseDate) ⇒ [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
100
- * [.formatDate(date, format)](#DateRangePicker+formatDate) ⇒ <code>string</code>
101
- * [.validateInput(range, dipatch)](#DateRangePicker+validateInput) ⇒ [<code>InputViolation</code>](#InputViolation) \| <code>null</code>
102
- * [.updateView(monthChange)](#DateRangePicker+updateView)
103
- * [.show()](#DateRangePicker+show)
104
- * [.hide()](#DateRangePicker+hide)
105
- * [.toggle()](#DateRangePicker+toggle)
106
- * [.showCalendars()](#DateRangePicker+showCalendars)
107
- * [.hideCalendars()](#DateRangePicker+hideCalendars)
108
- * [.updateElement()](#DateRangePicker+updateElement)
109
- * [.updateAltInput()](#DateRangePicker+updateAltInput)
110
- * [.remove()](#DateRangePicker+remove)
111
- * _static_
112
- * [.daterangepicker(options, callback)](#DateRangePicker.daterangepicker) ⇒
105
+ * [.startDate](#DateRangePicker+startDate) : [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
106
+ * [.endDate](#DateRangePicker+endDate) : [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
107
+ * [.events](#DateRangePicker+events)
108
+ * [.setStartDate(startDate, updateView)](#DateRangePicker+setStartDate) ⇒ <code>InputViolation</code>
109
+ * [.setEndDate(endDate, updateView)](#DateRangePicker+setEndDate) ⇒ <code>InputViolation</code>
110
+ * [.setRange(startDate, endDate, updateView)](#DateRangePicker+setRange) ⇒ <code>InputViolation</code>
111
+ * [.parseDate(value)](#DateRangePicker+parseDate) ⇒ [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
112
+ * [.formatDate(date, format)](#DateRangePicker+formatDate) ⇒ <code>string</code>
113
+ * [.validateInput(range, dipatch)](#DateRangePicker+validateInput) ⇒ <code>InputViolation</code> \| <code>null</code>
114
+ * [.updateView(monthChange)](#DateRangePicker+updateView)
115
+ * [.show()](#DateRangePicker+show)
116
+ * [.hide()](#DateRangePicker+hide)
117
+ * [.toggle()](#DateRangePicker+toggle)
118
+ * [.showCalendars()](#DateRangePicker+showCalendars)
119
+ * [.hideCalendars()](#DateRangePicker+hideCalendars)
120
+ * [.updateElement()](#DateRangePicker+updateElement)
121
+ * [.updateAltInput()](#DateRangePicker+updateAltInput)
122
+ * [.remove()](#DateRangePicker+remove)
123
+ * [.addListener(element, eventName, selector, delegate)](#DateRangePicker+addListener)
113
124
 
114
125
  <a name="new_DateRangePicker_new"></a>
115
126
 
@@ -117,9 +128,9 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
117
128
 
118
129
  | Param | Type | Description |
119
130
  | --- | --- | --- |
120
- | element | [<code>jQuery</code>](https://api.jquery.com/Types/#jQuery/) | jQuery selector of the parent element that the date range picker will be added to |
131
+ | element | <code>string</code> \| [<code>HTMLElement</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLElement) | A DOM HTMLElement or querySelector string of element where DateRangePicker is attached. Often a `<input>` element. |
121
132
  | options | [<code>Options</code>](#Options) | Object to configure the DateRangePicker |
122
- | cb | <code>function</code> | Callback function executed when |
133
+ | cb | <code>function</code> | Callback function executed when new date values applied |
123
134
 
124
135
  <a name="DateRangePicker+startDate"></a>
125
136
 
@@ -141,13 +152,13 @@ Getter for all DateRangePickerEvents
141
152
  **Kind**: instance property of [<code>DateRangePicker</code>](#DateRangePicker)
142
153
  <a name="DateRangePicker+setStartDate"></a>
143
154
 
144
- ### dateRangePicker.setStartDate(startDate, updateView) ⇒ [<code>InputViolation</code>](#InputViolation)
155
+ ### dateRangePicker.setStartDate(startDate, updateView) ⇒ <code>InputViolation</code>
145
156
  Sets the date range picker's currently selected start date to the provided date.<br>
146
157
  `startDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or a string matching `locale.format`.<br>
147
- Invalid date values are handled by [violated](#DateRangePicker+violated) Event
158
+ Invalid date values are handled by [violate](#DateRangePicker+violate) Event
148
159
 
149
160
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
150
- **Returns**: [<code>InputViolation</code>](#InputViolation) - - Object of violations or `null` if no violation have been found
161
+ **Returns**: <code>InputViolation</code> - - Object of violations or `null` if no violation have been found
151
162
 
152
163
  | Param | Type | Default | Description |
153
164
  | --- | --- | --- | --- |
@@ -156,18 +167,18 @@ Invalid date values are handled by [violated](#DateRangePicker+violated) Event
156
167
 
157
168
  **Example**
158
169
  ```js
159
- const drp = $('#picker').data('daterangepicker');
170
+ const drp = getDateRangePicker('#picker');
160
171
  drp.setStartDate(DateTime.now().startOf('hour'));
161
172
  ```
162
173
  <a name="DateRangePicker+setEndDate"></a>
163
174
 
164
- ### dateRangePicker.setEndDate(endDate, updateView) ⇒ [<code>InputViolation</code>](#InputViolation)
175
+ ### dateRangePicker.setEndDate(endDate, updateView) ⇒ <code>InputViolation</code>
165
176
  Sets the date range picker's currently selected start date to the provided date.<br>
166
177
  `endDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or a string matching `locale.format`.<br>
167
- Invalid date values are handled by [violated](#DateRangePicker+violated) Event
178
+ Invalid date values are handled by [violate](#DateRangePicker+violate) Event
168
179
 
169
180
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
170
- **Returns**: [<code>InputViolation</code>](#InputViolation) - - Object of violations or `null` if no violation have been found
181
+ **Returns**: <code>InputViolation</code> - - Object of violations or `null` if no violation have been found
171
182
 
172
183
  | Param | Type | Default | Description |
173
184
  | --- | --- | --- | --- |
@@ -176,18 +187,18 @@ Invalid date values are handled by [violated](#DateRangePicker+violated) Event
176
187
 
177
188
  **Example**
178
189
  ```js
179
- const drp = $('#picker').data('daterangepicker');
190
+ const drp = getDateRangePicker('#picker');
180
191
  drp.setEndDate(DateTime.now().startOf('hour'));
181
192
  ```
182
193
  <a name="DateRangePicker+setRange"></a>
183
194
 
184
- ### dateRangePicker.setRange(startDate, endDate, updateView) ⇒ [<code>InputViolation</code>](#InputViolation)
195
+ ### dateRangePicker.setRange(startDate, endDate, updateView) ⇒ <code>InputViolation</code>
185
196
  Sets the date range picker's currently selected start date to the provided date.<br>
186
197
  `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>
187
- Invalid date values are handled by [violated](#DateRangePicker+violated) Event
198
+ Invalid date values are handled by [violate](#DateRangePicker+violate) Event
188
199
 
189
200
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
190
- **Returns**: [<code>InputViolation</code>](#InputViolation) - - Object of violations or `null` if no violation have been found
201
+ **Returns**: <code>InputViolation</code> - - Object of violations or `null` if no violation have been found
191
202
 
192
203
  | Param | Type | Default | Description |
193
204
  | --- | --- | --- | --- |
@@ -197,7 +208,7 @@ Invalid date values are handled by [violated](#DateRangePicker+violated) Event
197
208
 
198
209
  **Example**
199
210
  ```js
200
- const drp = $('#picker').data('daterangepicker');
211
+ const drp = getDateRangePicker('#picker');
201
212
  drp.setRange(DateTime.now().startOf('hour'), DateTime.now().endOf('day'));
202
213
  ```
203
214
  <a name="DateRangePicker+parseDate"></a>
@@ -227,18 +238,18 @@ Format a DateTime object
227
238
 
228
239
  <a name="DateRangePicker+validateInput"></a>
229
240
 
230
- ### dateRangePicker.validateInput(range, dipatch) ⇒ [<code>InputViolation</code>](#InputViolation) \| <code>null</code>
241
+ ### dateRangePicker.validateInput(range, dipatch) ⇒ <code>InputViolation</code> \| <code>null</code>
231
242
  Validate `startDate` and `endDate` against `timePickerStepSize`, `minDate`, `maxDate`,
232
243
  `minSpan`, `maxSpan`, `invalidDate` and `invalidTime`.
233
244
 
234
245
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
235
- **Returns**: [<code>InputViolation</code>](#InputViolation) \| <code>null</code> - - Object of violations and corrected values or `null` if no violation have been found
236
- **Emits**: <code>event:&quot;violated.daterangepicker&quot;</code>
246
+ **Returns**: <code>InputViolation</code> \| <code>null</code> - - Object of violations and corrected values or `null` if no violation have been found
247
+ **Emits**: <code>event:&quot;violate&quot;</code>
237
248
 
238
249
  | Param | Type | Default | Description |
239
250
  | --- | --- | --- | --- |
240
251
  | range | <code>Array</code> | | `[startDate, endDate]`<br>Range to be checked, defaults to current `startDate` and `endDate` |
241
- | 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. |
252
+ | dipatch | <code>boolean</code> | <code>false</code> | If `true` then event "violate" is dispated.<br> If eventHandler returns `true`, then `null` is returned, otherwiese the object of violations. |
242
253
 
243
254
  **Example**
244
255
  ```js
@@ -252,18 +263,18 @@ options => {
252
263
  const result = validateInput(DateTime.now(), DateTime.now().plus({day: 3}));
253
264
 
254
265
  result => {
255
- startDate: {
256
- violations: [
257
- { old: "2026-03-13T10:35:52", reason: "timePickerStepSize", new: "2026-03-13T11:00:00" },
258
- { old: "2026-03-13T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" }
259
- ]
260
- },
266
+ startDate: [
267
+ { old: "2026-03-13T10:35:52", reason: "timePickerStepSize", new: "2026-03-13T11:00:00" },
268
+ { old: "2026-03-13T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" }
269
+ ],
261
270
  endDate: {
262
- violations: [
263
- { old: "2026-03-16T10:35:52", reason: "stepSize", new: "2026-03-16T11:00:00" },
264
- { old: "2026-03-16T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" },
265
- { old: "2026-03-10T00:00:00", reason: "minSpan", new: "2026-03-17T00:00:00" }
266
- ]
271
+ { old: "2026-03-16T10:35:52", reason: "stepSize", new: "2026-03-16T11:00:00" },
272
+ { old: "2026-03-16T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" },
273
+ { old: "2026-03-10T00:00:00", reason: "minSpan", new: "2026-03-17T00:00:00" }
274
+ ],
275
+ newDate: {
276
+ startDate: "2026-03-10T00:00:00",
277
+ endDate: "2026-03-17T00:00:00"
267
278
  }
268
279
  }
269
280
  ```
@@ -274,7 +285,7 @@ Updates the picker when calendar is initiated or any date has been selected.
274
285
  Could be useful after running [setStartDate](#DateRangePicker+setStartDate) or [setRange](#DateRangePicker+setEndDate)
275
286
 
276
287
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
277
- **Emits**: <code>event:&quot;beforeRenderTimePicker.daterangepicker&quot;</code>
288
+ **Emits**: <code>event:&quot;beforeRenderTimePicker&quot;</code>
278
289
 
279
290
  | Param | Type | Description |
280
291
  | --- | --- | --- |
@@ -286,14 +297,14 @@ Could be useful after running [setStartDate](#DateRangePicker+setStartDate) or [
286
297
  Shows the picker
287
298
 
288
299
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
289
- **Emits**: <code>event:&quot;show.daterangepicker&quot;</code>
300
+ **Emits**: <code>event:&quot;show&quot;</code>
290
301
  <a name="DateRangePicker+hide"></a>
291
302
 
292
303
  ### dateRangePicker.hide()
293
304
  Hides the picker
294
305
 
295
306
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
296
- **Emits**: <code>event:&quot;beforeHide.daterangepicker&quot;</code>, <code>event:&quot;hide.daterangepicker&quot;</code>
307
+ **Emits**: <code>event:&quot;beforeHide&quot;</code>, <code>event:&quot;hide&quot;</code>
297
308
  <a name="DateRangePicker+toggle"></a>
298
309
 
299
310
  ### dateRangePicker.toggle()
@@ -306,21 +317,21 @@ Toggles visibility of the picker
306
317
  Shows calendar when user selects "Custom Ranges"
307
318
 
308
319
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
309
- **Emits**: <code>event:&quot;showCalendar.daterangepicker&quot;</code>
320
+ **Emits**: <code>event:&quot;showCalendar&quot;</code>
310
321
  <a name="DateRangePicker+hideCalendars"></a>
311
322
 
312
323
  ### dateRangePicker.hideCalendars()
313
324
  Hides calendar when user selects a predefined range
314
325
 
315
326
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
316
- **Emits**: <code>event:&quot;hideCalendar.daterangepicker&quot;</code>
327
+ **Emits**: <code>event:&quot;hideCalendar&quot;</code>
317
328
  <a name="DateRangePicker+updateElement"></a>
318
329
 
319
330
  ### dateRangePicker.updateElement()
320
331
  Update attached `<input>` element with selected value
321
332
 
322
333
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
323
- **Emits**: [<code>change</code>](https://api.jquery.com/change/)
334
+ **Emits**: [<code>change</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
324
335
  <a name="DateRangePicker+updateAltInput"></a>
325
336
 
326
337
  ### dateRangePicker.updateAltInput()
@@ -333,39 +344,73 @@ Update altInput `<input>` element with selected value
333
344
  Removes the picker from document
334
345
 
335
346
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
336
- <a name="DateRangePicker.daterangepicker"></a>
347
+ <a name="DateRangePicker+addListener"></a>
348
+
349
+ ### dateRangePicker.addListener(element, eventName, selector, delegate)
350
+ Helper function to add eventListener similar to jQuery .on( events [, selector ] [, data ] )
351
+
352
+ **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
353
+
354
+ | Param | Type | Description |
355
+ | --- | --- | --- |
356
+ | element | <code>string</code> | Query selector of element where listener is added |
357
+ | eventName | <code>string</code> | Name of the event |
358
+ | selector | <code>string</code> | Query selector string to filter the descendants of the element |
359
+ | delegate | <code>any</code> | Handler data |
360
+
361
+ <a name="DateRangePickerEvent"></a>
337
362
 
338
- ### DateRangePicker.daterangepicker(options, callback) ⇒
363
+ ## DateRangePickerEvent ⇐ <code>Event</code>
364
+ **Kind**: global class
365
+ **Extends**: <code>Event</code>
366
+ <a name="daterangepicker"></a>
367
+
368
+ ## daterangepicker(elements, options, callback) ⇒ <code>HTMLElement</code> \| <code>Array.&lt;HTMLElement&gt;</code>
339
369
  Initiate a new DateRangePicker
340
370
 
341
- **Kind**: static method of [<code>DateRangePicker</code>](#DateRangePicker)
342
- **Returns**: DateRangePicker
371
+ **Kind**: global function
372
+ **Returns**: <code>HTMLElement</code> \| <code>Array.&lt;HTMLElement&gt;</code> - The input `element` instance or an array of HTMLElement instances if `elements` matches more than one element
343
373
 
344
374
  | Param | Type | Description |
345
375
  | --- | --- | --- |
376
+ | elements | <code>string</code> \| [<code>HTMLElement</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLElement) | Element where DateRangePicker is attached |
346
377
  | options | [<code>Options</code>](#Options) | Object to configure the DateRangePicker |
347
- | 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 |
378
+ | 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"](#event_apply) event |
379
+
380
+ <a name="getDateRangePicker"></a>
381
+
382
+ ## getDateRangePicker(target) ⇒ [<code>DateRangePicker</code>](#DateRangePicker)
383
+ Returns the DateRangePicker. Equivalent to `element._daterangepicker`
384
+
385
+ **Kind**: global function
386
+ **Returns**: [<code>DateRangePicker</code>](#DateRangePicker) - - The attached DateRangePicker
387
+
388
+ | Param | Type | Description |
389
+ | --- | --- | --- |
390
+ | target | <code>HTMLElement</code> \| <code>string</code> | The HTMLElement or querySelector string where the DateRangePicker is attached. |
348
391
 
349
- <a name="event_violate.daterangepicker"></a>
392
+ <a name="event_violate"></a>
350
393
 
351
- ## "violate.daterangepicker" (picker, result, newDate) ⇒ <code>boolean</code>
394
+ ## "violate"
352
395
  Emitted when the date is changed through `<input>` element or via [setStartDate](#DateRangePicker+setStartDate) or
353
396
  [setRange](#DateRangePicker+setRange) and date is not valid due to
354
397
  `minDate`, `maxDate`, `minSpan`, `maxSpan`, `invalidDate` and `invalidTime` constraints.<br>
355
398
  Event is only triggered when date string is valid and date value is changing<br>
356
399
 
357
400
  **Kind**: event emitted
358
- **Returns**: <code>boolean</code> - =undefined - If handler returns `true`, then values from `newDate` object are used
401
+ **Properties**
359
402
 
360
- | Param | Type | Description |
361
- | --- | --- | --- |
362
- | picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
363
- | result | [<code>InputViolation</code>](#InputViolation) | The violation object, see example of `validateInput()` |
364
- | newDate | <code>Object</code> | Object of {startDate, endDate} |
403
+ | Name | Type | Default | Description |
404
+ | --- | --- | --- | --- |
405
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | | The Event object |
406
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | | The daterangepicker object |
407
+ | event.violation | <code>InputViolation</code> | | The daterangepicker object |
408
+ | event.newDate | [<code>NewDate</code>](#NewDate) | | Object of corrected date values |
409
+ | event.cancelable | <code>boolean</code> | <code>true</code> | By calling `event.preventDefault()` the `newDate` values will apply |
365
410
 
366
411
  **Example**
367
412
  ```js
368
- $('#picker').daterangepicker({
413
+ daterangepicker('#picker', {
369
414
  startDate: DateTime.now(),
370
415
  // allow only dates from current year
371
416
  minDate: DateTime.now().startOf('year'),
@@ -374,181 +419,212 @@ $('#picker').daterangepicker({
374
419
  locale: {
375
420
  format: DateTime.DATETIME_SHORT
376
421
  }
377
- }).on('violate.daterangepicker', (ev, picker, result, newDate) => {
378
- newDate.startDate = DateTime.now().minus({ days: 3 }).startOf('day');
379
- return true;
422
+ }).addEventListener('violate', (ev) => {
423
+ ev.newDate.startDate = DateTime.now().minus({ days: 3 }).startOf('day');
424
+ ev.preventDefault();
380
425
  });
381
426
 
382
427
  // Try to set date outside permitted range at <input> elemet
383
- $('#picker').val(DateTime.now().minus({ years: 10 })).toLocaleString(DateTime.DATETIME_SHORT).trigger('keyup');
428
+ const input = document.querySelector('#picker');
429
+ input.value = DateTime.now().minus({ years: 10 })).toLocaleString(DateTime.DATETIME_SHORT)
430
+ input.dispatchEvent(new Event('keyup'));
384
431
  // Try to set date outside permitted range by code
385
- const drp = $('#picker').data('daterangepicker').setStartDate(DateTime.now().minus({ years: 10 })
432
+ const drp = getDateRangePicker('#picker');
433
+ drp.setStartDate(DateTime.now().minus({ years: 10 });
386
434
 
387
435
  // -> Calendar selects and shows "today - 3 days"
388
436
  ```
389
- <a name="event_beforeRenderCalendar.daterangepicker"></a>
437
+ <a name="event_beforeRenderCalendar"></a>
390
438
 
391
- ## "beforeRenderCalendar.daterangepicker" (this)
439
+ ## "beforeRenderCalendar"
392
440
  Emitted before the calendar time picker is rendered.
393
441
 
394
442
  **Kind**: event emitted
443
+ **Properties**
395
444
 
396
- | Param | Type | Description |
445
+ | Name | Type | Description |
397
446
  | --- | --- | --- |
398
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
447
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
448
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
399
449
 
400
- <a name="event_beforeRenderCalendar.daterangepicker"></a>
450
+ <a name="event_beforeRenderCalendar"></a>
401
451
 
402
- ## "beforeRenderCalendar.daterangepicker" (this)
452
+ ## "beforeRenderCalendar"
403
453
  Emitted before the calendar is rendered. Useful to remove any manually added elements.
404
454
 
405
455
  **Kind**: event emitted
456
+ **Properties**
406
457
 
407
- | Param | Type | Description |
458
+ | Name | Type | Description |
408
459
  | --- | --- | --- |
409
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
460
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
461
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
410
462
 
411
- <a name="event_show.daterangepicker"></a>
463
+ <a name="event_show"></a>
412
464
 
413
- ## "show.daterangepicker" (this)
465
+ ## "show"
414
466
  Emitted when the picker is shown
415
467
 
416
468
  **Kind**: event emitted
469
+ **Properties**
417
470
 
418
- | Param | Type | Description |
471
+ | Name | Type | Description |
419
472
  | --- | --- | --- |
420
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
473
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
474
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
421
475
 
422
- <a name="event_beforeHide.daterangepicker"></a>
476
+ <a name="event_beforeHide"></a>
423
477
 
424
- ## "beforeHide.daterangepicker" (this) ⇒ <code>boolean</code>
425
- Emitted before the picker will hide. When EventHandler returns `true`, then picker remains visible
478
+ ## "beforeHide"
479
+ Emitted before the picker will hide.
426
480
 
427
481
  **Kind**: event emitted
428
- **Returns**: <code>boolean</code> - cancel - If `true`, then the picker remains visible
482
+ **Properties**
429
483
 
430
- | Param | Type | Description |
431
- | --- | --- | --- |
432
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
484
+ | Name | Type | Default | Description |
485
+ | --- | --- | --- | --- |
486
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | | The Event object |
487
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | | The daterangepicker object |
488
+ | event.cancelable | <code>boolean</code> | <code>true</code> | Hide is canceled by calling `event.preventDefault()` |
433
489
 
434
- <a name="event_hide.daterangepicker"></a>
490
+ <a name="event_hide"></a>
435
491
 
436
- ## "hide.daterangepicker" (this)
492
+ ## "hide"
437
493
  Emitted when the picker is hidden
438
494
 
439
495
  **Kind**: event emitted
496
+ **Properties**
440
497
 
441
- | Param | Type | Description |
498
+ | Name | Type | Description |
442
499
  | --- | --- | --- |
443
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
500
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
501
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
444
502
 
445
- <a name="event_showCalendar.daterangepicker"></a>
503
+ <a name="event_showCalendar"></a>
446
504
 
447
- ## "showCalendar.daterangepicker" (this)
505
+ ## "showCalendar"
448
506
  Emitted when the calendar(s) are shown.
449
507
  Only useful when [Ranges](#Ranges) are used.
450
508
 
451
509
  **Kind**: event emitted
510
+ **Properties**
452
511
 
453
- | Param | Type | Description |
512
+ | Name | Type | Description |
454
513
  | --- | --- | --- |
455
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
514
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
515
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
456
516
 
457
- <a name="event_hideCalendar.daterangepicker"></a>
517
+ <a name="event_hideCalendar"></a>
458
518
 
459
- ## "hideCalendar.daterangepicker" (this)
519
+ ## "hideCalendar"
460
520
  Emitted when the calendar(s) are hidden. Only used when [Ranges](#Ranges) are used.
461
521
 
462
522
  **Kind**: event emitted
523
+ **Properties**
463
524
 
464
- | Param | Type | Description |
525
+ | Name | Type | Description |
465
526
  | --- | --- | --- |
466
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
527
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
528
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
467
529
 
468
- <a name="event_outsideClick.daterangepicker"></a>
530
+ <a name="event_outsideClick"></a>
469
531
 
470
- ## "outsideClick.daterangepicker" (this)
532
+ ## "outsideClick"
471
533
  Emitted when user clicks outside the picker. Use option `onOutsideClick` to define the default action, then you may not need to handle this event.
472
534
 
473
535
  **Kind**: event emitted
536
+ **Properties**
474
537
 
475
- | Param | Type | Description |
538
+ | Name | Type | Description |
476
539
  | --- | --- | --- |
477
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
540
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
541
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
478
542
 
479
- <a name="event_dateChange.daterangepicker"></a>
543
+ <a name="event_dateChange"></a>
480
544
 
481
- ## "dateChange.daterangepicker" (this, side)
482
- Emitted when the date changed. Does not trigger when time is changed, use ["timeChange.daterangepicker"](#event_timeChange.daterangepicker) to handle it
545
+ ## "dateChange"
546
+ Emitted when the date changed. Does not trigger when time is changed, use ["timeChange"](#event_timeChange) to handle it
483
547
 
484
548
  **Kind**: event emitted
549
+ **Properties**
485
550
 
486
- | Param | Type | Description |
551
+ | Name | Type | Description |
487
552
  | --- | --- | --- |
488
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
489
- | side | <code>string</code> | Either `'start'` or `'end'` indicating whether startDate or endDate was changed. `null` when `singleDatePicker: true` |
553
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
554
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
555
+ | side | <code>string</code> | Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker |
490
556
 
491
- <a name="event_timeChange.daterangepicker"></a>
557
+ <a name="event_timeChange"></a>
492
558
 
493
- ## "timeChange.daterangepicker" (this, side)
559
+ ## "timeChange"
494
560
  Emitted when the time changed. Does not trigger when date is changed
495
561
 
496
562
  **Kind**: event emitted
563
+ **Properties**
497
564
 
498
- | Param | Type | Description |
565
+ | Name | Type | Description |
499
566
  | --- | --- | --- |
500
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
501
- | side | <code>string</code> | Either `'start'` or `'end'` indicating whether startDate or endDate was changed |
567
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
568
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
569
+ | side | <code>string</code> | Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker |
502
570
 
503
- <a name="event_apply.daterangepicker"></a>
571
+ <a name="event_apply"></a>
504
572
 
505
- ## "apply.daterangepicker" (this)
573
+ ## "apply"
506
574
  Emitted when the `Apply` button is clicked, or when a predefined [Ranges](#Ranges) is clicked
507
575
 
508
576
  **Kind**: event emitted
577
+ **Properties**
509
578
 
510
- | Param | Type | Description |
579
+ | Name | Type | Description |
511
580
  | --- | --- | --- |
512
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
581
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
582
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
513
583
 
514
- <a name="event_cancel.daterangepicker"></a>
584
+ <a name="event_cancel"></a>
515
585
 
516
- ## "cancel.daterangepicker" (this)
586
+ ## "cancel"
517
587
  Emitted when the `Cancel` button is clicked
518
588
 
519
589
  **Kind**: event emitted
590
+ **Properties**
520
591
 
521
- | Param | Type | Description |
592
+ | Name | Type | Description |
522
593
  | --- | --- | --- |
523
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
594
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
595
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
524
596
 
525
- <a name="event_inputChange.daterangepicker"></a>
597
+ <a name="event_inputChange"></a>
526
598
 
527
- ## "inputChange.daterangepicker" (this)
599
+ ## "inputChange"
528
600
  Emitted when the date is changed through `<input>` element. Event is only triggered when date string is valid and date value has changed
529
601
 
530
602
  **Kind**: event emitted
603
+ **Properties**
531
604
 
532
- | Param | Type | Description |
605
+ | Name | Type | Description |
533
606
  | --- | --- | --- |
534
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
607
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
608
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
535
609
 
536
- <a name="event_monthViewChange.daterangepicker"></a>
610
+ <a name="event_monthViewChange"></a>
537
611
 
538
- ## "monthViewChange.daterangepicker" (this, left, right)
612
+ ## "monthViewChange"
539
613
  Emitted after month view changed, for example by click on 'prev' or 'next'
540
614
 
541
615
  **Kind**: event emitted
616
+ **Properties**
542
617
 
543
- | Param | Type | Description |
618
+ | Name | Type | Description |
544
619
  | --- | --- | --- |
545
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
546
- | left | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | For day of left-hand calendar |
547
- | right | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| <code>null</code> | For day of right-hand calendar |
620
+ | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
621
+ | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
622
+ | left | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | The first day of month in left-hand calendar |
623
+ | right | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | The first day of month in left-hand calendar or `null` for singleDatePicker |
548
624
 
549
- <a name="event_beforeRenderTimePicker.daterangepicker"></a>
625
+ <a name="event_beforeRenderTimePicker"></a>
550
626
 
551
- ## "beforeRenderTimePicker.daterangepicker" (this)
627
+ ## "beforeRenderTimePicker" (this)
552
628
  Emitted before the TimePicker is rendered.
553
629
  Useful to remove any manually added elements.
554
630
 
@@ -568,7 +644,7 @@ Options for DateRangePicker
568
644
 
569
645
  | Name | Type | Default | Description |
570
646
  | --- | --- | --- | --- |
571
- | 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 |
647
+ | parentEl | <code>string</code> \| [<code>HTMLElement</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLElement) | <code>&quot;body&quot;</code> | [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors) or `HTMLElement` of the parent element that the date range picker will be added to |
572
648
  | 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. |
573
649
  | 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> |
574
650
  | 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`. |
@@ -587,25 +663,21 @@ Options for DateRangePicker
587
663
  | 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` |
588
664
  | timePicker | <code>boolean</code> | <code>false</code> | Adds select boxes to choose times in addition to dates |
589
665
  | 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). |
590
- | 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` |
591
- | timePickerSeconds | <code>boolean</code> | <code>boolean</code> | **Deprecated**, use `timePickerStepSize`<br>Show seconds in the timePicker |
592
- | timePickerIncrement | <code>boolean</code> | <code>1</code> | **Deprecated**, use `timePickerStepSize`<br>Increment of the minutes selection list for times |
666
+ | 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. |
593
667
  | 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`. |
594
- | 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. |
668
+ | 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](#event_outsideClick) is always emitted. |
595
669
  | 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 |
596
670
  | 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> |
597
671
  | 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> |
598
672
  | 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)` |
599
- | 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']` |
673
+ | altInput | <code>string</code> \| <code>Array</code> \| [<code>HTMLInputElement</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLInputElement) | <code>null</code> | A [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)<br> string or `HTMLElement` for an alternative output (typically hidden) `<input>` element. Uses `altFormat` to format the value.<br> Must be a single string/HTMLElement for `singleDatePicker: true` or an array of two strings or HTMLElement for `singleDatePicker: false`<br> Example: `['#start', '#end']` |
600
674
  | 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()` |
601
- | ~~warnings~~ | <code>boolean</code> | | Not used anymore. Listen to event `violated.daterangepicker` to react on invalid input data |
602
675
  | applyButtonClasses | <code>string</code> | <code>&quot;btn-primary&quot;</code> | CSS class names that will be added only to the apply button |
603
676
  | cancelButtonClasses | <code>string</code> | <code>&quot;btn-default&quot;</code> | CSS class names that will be added only to the cancel button |
604
677
  | buttonClasses | <code>string</code> | | Default: `'btn btn-sm'`<br>CSS class names that will be added to both the apply and cancel buttons. |
605
678
  | 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. |
606
679
  | 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. |
607
680
  | 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. |
608
- | externalStyle | <code>string</code> | <code>null</code> | External CSS Framework to style the picker. Currently only `'bulma'` is supported. |
609
681
  | 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'` |
610
682
  | 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'` |
611
683
  | 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. |
@@ -624,6 +696,7 @@ Options for DateRangePicker
624
696
  | locale.cancelLabel | <code>string</code> | <code>&quot;Cancel&quot;</code> | Label of `Cancel` Button |
625
697
  | locale.customRangeLabel | <code>string</code> | <code>&quot;Custom&quot;</code> | Range - Title for custom ranges |
626
698
  | 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) => {}` |
699
+ | END_OF_OPTIONS | | | |
627
700
 
628
701
  <a name="Ranges"></a>
629
702
 
@@ -667,20 +740,22 @@ A single predefined range
667
740
  ```js
668
741
  { Today: [DateTime.now().startOf('day'), DateTime.now().endOf('day')] }
669
742
  ```
670
- <a name="InputViolation"></a>
743
+ <a name="NewDate"></a>
671
744
 
672
- ## InputViolation : <code>Object</code>
745
+ ## NewDate : <code>Object</code>
673
746
  **Kind**: global typedef
674
747
  **Properties**
675
748
 
676
749
  | Name | Type | Description |
677
750
  | --- | --- | --- |
678
- | startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Violation of startDate |
679
- | endDate? | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| <code>undefined</code> | Violation of endDate, if existing |
680
- | violations | <code>Array</code> | The constraints which violates the input |
681
- | reason | <code>Array</code> | The type/reson of violation |
751
+ | reason | <code>string</code> | The type/reason of violation |
682
752
  | old | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Old value startDate/endDate |
683
753
  | new? | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Corrected value of startDate/endDate if existing |
754
+ | newDate.startDate- | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Object with corrected values |
755
+ | newDate.endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Object with corrected values |
756
+ | startDate | <code>Array.&lt;Violation&gt;</code> | The constraints which violates the input |
757
+ | endDate | <code>Array.&lt;Violation&gt;</code> | The constraints which violates the input or `null` for singleDatePicker |
758
+ | newDate | [<code>NewDate</code>](#NewDate) | Object with corrected values |
684
759
 
685
760
  <a name="callback"></a>
686
761