@wernfried/daterangepicker 4.18.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 +257 -173
  2. package/README.md +135 -166
  3. package/dist/esm/daterangepicker.js +649 -509
  4. package/dist/esm/daterangepicker.min.js +1 -2
  5. package/dist/global/daterangepicker.js +670 -506
  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_violated.daterangepicker">"violated.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_inputChanged.daterangepicker">"inputChanged.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_monthViewChanged.daterangepicker">"monthViewChanged.daterangepicker" (this)</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,26 +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
- * [.setStartDate(startDate, updateView)](#DateRangePicker+setStartDate) ⇒ [<code>InputViolation</code>](#InputViolation)
96
- * [.setEndDate(endDate, updateView)](#DateRangePicker+setEndDate) ⇒ [<code>InputViolation</code>](#InputViolation)
97
- * [.setRange(startDate, endDate, updateView)](#DateRangePicker+setRange) ⇒ [<code>InputViolation</code>](#InputViolation)
98
- * [.parseDate(value)](#DateRangePicker+parseDate) ⇒ [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
99
- * [.formatDate(date, format)](#DateRangePicker+formatDate) ⇒ <code>string</code>
100
- * [.validateInput(range, dipatch)](#DateRangePicker+validateInput) ⇒ [<code>InputViolation</code>](#InputViolation) \| <code>null</code>
101
- * [.updateView(monthChanged)](#DateRangePicker+updateView)
102
- * [.show()](#DateRangePicker+show)
103
- * [.hide()](#DateRangePicker+hide)
104
- * [.toggle()](#DateRangePicker+toggle)
105
- * [.showCalendars()](#DateRangePicker+showCalendars)
106
- * [.hideCalendars()](#DateRangePicker+hideCalendars)
107
- * [.updateElement()](#DateRangePicker+updateElement)
108
- * [.updateAltInput()](#DateRangePicker+updateAltInput)
109
- * [.remove()](#DateRangePicker+remove)
110
- * _static_
111
- * [.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)
112
124
 
113
125
  <a name="new_DateRangePicker_new"></a>
114
126
 
@@ -116,9 +128,9 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
116
128
 
117
129
  | Param | Type | Description |
118
130
  | --- | --- | --- |
119
- | 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. |
120
132
  | options | [<code>Options</code>](#Options) | Object to configure the DateRangePicker |
121
- | cb | <code>function</code> | Callback function executed when |
133
+ | cb | <code>function</code> | Callback function executed when new date values applied |
122
134
 
123
135
  <a name="DateRangePicker+startDate"></a>
124
136
 
@@ -131,16 +143,22 @@ startDate
131
143
  ### dateRangePicker.endDate : [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
132
144
  endDate
133
145
 
146
+ **Kind**: instance property of [<code>DateRangePicker</code>](#DateRangePicker)
147
+ <a name="DateRangePicker+events"></a>
148
+
149
+ ### dateRangePicker.events
150
+ Getter for all DateRangePickerEvents
151
+
134
152
  **Kind**: instance property of [<code>DateRangePicker</code>](#DateRangePicker)
135
153
  <a name="DateRangePicker+setStartDate"></a>
136
154
 
137
- ### dateRangePicker.setStartDate(startDate, updateView) ⇒ [<code>InputViolation</code>](#InputViolation)
155
+ ### dateRangePicker.setStartDate(startDate, updateView) ⇒ <code>InputViolation</code>
138
156
  Sets the date range picker's currently selected start date to the provided date.<br>
139
157
  `startDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or a string matching `locale.format`.<br>
140
- Invalid date values are handled by [violated](#DateRangePicker+violated) Event
158
+ Invalid date values are handled by [violate](#DateRangePicker+violate) Event
141
159
 
142
160
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
143
- **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
144
162
 
145
163
  | Param | Type | Default | Description |
146
164
  | --- | --- | --- | --- |
@@ -149,18 +167,18 @@ Invalid date values are handled by [violated](#DateRangePicker+violated) Event
149
167
 
150
168
  **Example**
151
169
  ```js
152
- const drp = $('#picker').data('daterangepicker');
170
+ const drp = getDateRangePicker('#picker');
153
171
  drp.setStartDate(DateTime.now().startOf('hour'));
154
172
  ```
155
173
  <a name="DateRangePicker+setEndDate"></a>
156
174
 
157
- ### dateRangePicker.setEndDate(endDate, updateView) ⇒ [<code>InputViolation</code>](#InputViolation)
175
+ ### dateRangePicker.setEndDate(endDate, updateView) ⇒ <code>InputViolation</code>
158
176
  Sets the date range picker's currently selected start date to the provided date.<br>
159
177
  `endDate` must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or a string matching `locale.format`.<br>
160
- Invalid date values are handled by [violated](#DateRangePicker+violated) Event
178
+ Invalid date values are handled by [violate](#DateRangePicker+violate) Event
161
179
 
162
180
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
163
- **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
164
182
 
165
183
  | Param | Type | Default | Description |
166
184
  | --- | --- | --- | --- |
@@ -169,18 +187,18 @@ Invalid date values are handled by [violated](#DateRangePicker+violated) Event
169
187
 
170
188
  **Example**
171
189
  ```js
172
- const drp = $('#picker').data('daterangepicker');
190
+ const drp = getDateRangePicker('#picker');
173
191
  drp.setEndDate(DateTime.now().startOf('hour'));
174
192
  ```
175
193
  <a name="DateRangePicker+setRange"></a>
176
194
 
177
- ### dateRangePicker.setRange(startDate, endDate, updateView) ⇒ [<code>InputViolation</code>](#InputViolation)
195
+ ### dateRangePicker.setRange(startDate, endDate, updateView) ⇒ <code>InputViolation</code>
178
196
  Sets the date range picker's currently selected start date to the provided date.<br>
179
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>
180
- Invalid date values are handled by [violated](#DateRangePicker+violated) Event
198
+ Invalid date values are handled by [violate](#DateRangePicker+violate) Event
181
199
 
182
200
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
183
- **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
184
202
 
185
203
  | Param | Type | Default | Description |
186
204
  | --- | --- | --- | --- |
@@ -190,7 +208,7 @@ Invalid date values are handled by [violated](#DateRangePicker+violated) Event
190
208
 
191
209
  **Example**
192
210
  ```js
193
- const drp = $('#picker').data('daterangepicker');
211
+ const drp = getDateRangePicker('#picker');
194
212
  drp.setRange(DateTime.now().startOf('hour'), DateTime.now().endOf('day'));
195
213
  ```
196
214
  <a name="DateRangePicker+parseDate"></a>
@@ -220,18 +238,18 @@ Format a DateTime object
220
238
 
221
239
  <a name="DateRangePicker+validateInput"></a>
222
240
 
223
- ### dateRangePicker.validateInput(range, dipatch) ⇒ [<code>InputViolation</code>](#InputViolation) \| <code>null</code>
241
+ ### dateRangePicker.validateInput(range, dipatch) ⇒ <code>InputViolation</code> \| <code>null</code>
224
242
  Validate `startDate` and `endDate` against `timePickerStepSize`, `minDate`, `maxDate`,
225
243
  `minSpan`, `maxSpan`, `invalidDate` and `invalidTime`.
226
244
 
227
245
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
228
- **Returns**: [<code>InputViolation</code>](#InputViolation) \| <code>null</code> - - Object of violations and corrected values or `null` if no violation have been found
229
- **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>
230
248
 
231
249
  | Param | Type | Default | Description |
232
250
  | --- | --- | --- | --- |
233
251
  | range | <code>Array</code> | | `[startDate, endDate]`<br>Range to be checked, defaults to current `startDate` and `endDate` |
234
- | 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. |
235
253
 
236
254
  **Example**
237
255
  ```js
@@ -245,33 +263,33 @@ options => {
245
263
  const result = validateInput(DateTime.now(), DateTime.now().plus({day: 3}));
246
264
 
247
265
  result => {
248
- startDate: {
249
- violations: [
250
- { old: "2026-03-13T10:35:52", reason: "timePickerStepSize", new: "2026-03-13T11:00:00" },
251
- { old: "2026-03-13T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" }
252
- ]
253
- },
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
+ ],
254
270
  endDate: {
255
- violations: [
256
- { old: "2026-03-16T10:35:52", reason: "stepSize", new: "2026-03-16T11:00:00" },
257
- { old: "2026-03-16T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" },
258
- { old: "2026-03-10T00:00:00", reason: "minSpan", new: "2026-03-17T00:00:00" }
259
- ]
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"
260
278
  }
261
279
  }
262
280
  ```
263
281
  <a name="DateRangePicker+updateView"></a>
264
282
 
265
- ### dateRangePicker.updateView(monthChanged)
283
+ ### dateRangePicker.updateView(monthChange)
266
284
  Updates the picker when calendar is initiated or any date has been selected.
267
285
  Could be useful after running [setStartDate](#DateRangePicker+setStartDate) or [setRange](#DateRangePicker+setEndDate)
268
286
 
269
287
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
270
- **Emits**: <code>event:&quot;beforeRenderTimePicker.daterangepicker&quot;</code>
288
+ **Emits**: <code>event:&quot;beforeRenderTimePicker&quot;</code>
271
289
 
272
290
  | Param | Type | Description |
273
291
  | --- | --- | --- |
274
- | monthChanged | <code>boolean</code> | If `true` then monthView changed |
292
+ | monthChange | <code>boolean</code> | If `true` then monthView changed |
275
293
 
276
294
  <a name="DateRangePicker+show"></a>
277
295
 
@@ -279,14 +297,14 @@ Could be useful after running [setStartDate](#DateRangePicker+setStartDate) or [
279
297
  Shows the picker
280
298
 
281
299
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
282
- **Emits**: <code>event:&quot;show.daterangepicker&quot;</code>
300
+ **Emits**: <code>event:&quot;show&quot;</code>
283
301
  <a name="DateRangePicker+hide"></a>
284
302
 
285
303
  ### dateRangePicker.hide()
286
304
  Hides the picker
287
305
 
288
306
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
289
- **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>
290
308
  <a name="DateRangePicker+toggle"></a>
291
309
 
292
310
  ### dateRangePicker.toggle()
@@ -299,21 +317,21 @@ Toggles visibility of the picker
299
317
  Shows calendar when user selects "Custom Ranges"
300
318
 
301
319
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
302
- **Emits**: <code>event:&quot;showCalendar.daterangepicker&quot;</code>
320
+ **Emits**: <code>event:&quot;showCalendar&quot;</code>
303
321
  <a name="DateRangePicker+hideCalendars"></a>
304
322
 
305
323
  ### dateRangePicker.hideCalendars()
306
324
  Hides calendar when user selects a predefined range
307
325
 
308
326
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
309
- **Emits**: <code>event:&quot;hideCalendar.daterangepicker&quot;</code>
327
+ **Emits**: <code>event:&quot;hideCalendar&quot;</code>
310
328
  <a name="DateRangePicker+updateElement"></a>
311
329
 
312
330
  ### dateRangePicker.updateElement()
313
331
  Update attached `<input>` element with selected value
314
332
 
315
333
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
316
- **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)
317
335
  <a name="DateRangePicker+updateAltInput"></a>
318
336
 
319
337
  ### dateRangePicker.updateAltInput()
@@ -326,39 +344,73 @@ Update altInput `<input>` element with selected value
326
344
  Removes the picker from document
327
345
 
328
346
  **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)
329
- <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>
330
362
 
331
- ### 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>
332
369
  Initiate a new DateRangePicker
333
370
 
334
- **Kind**: static method of [<code>DateRangePicker</code>](#DateRangePicker)
335
- **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
336
373
 
337
374
  | Param | Type | Description |
338
375
  | --- | --- | --- |
376
+ | elements | <code>string</code> \| [<code>HTMLElement</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLElement) | Element where DateRangePicker is attached |
339
377
  | options | [<code>Options</code>](#Options) | Object to configure the DateRangePicker |
340
- | 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
341
387
 
342
- <a name="event_violated.daterangepicker"></a>
388
+ | Param | Type | Description |
389
+ | --- | --- | --- |
390
+ | target | <code>HTMLElement</code> \| <code>string</code> | The HTMLElement or querySelector string where the DateRangePicker is attached. |
391
+
392
+ <a name="event_violate"></a>
343
393
 
344
- ## "violated.daterangepicker" (picker, result, newDate) ⇒ <code>boolean</code>
394
+ ## "violate"
345
395
  Emitted when the date is changed through `<input>` element or via [setStartDate](#DateRangePicker+setStartDate) or
346
396
  [setRange](#DateRangePicker+setRange) and date is not valid due to
347
397
  `minDate`, `maxDate`, `minSpan`, `maxSpan`, `invalidDate` and `invalidTime` constraints.<br>
348
398
  Event is only triggered when date string is valid and date value is changing<br>
349
399
 
350
400
  **Kind**: event emitted
351
- **Returns**: <code>boolean</code> - =undefined - If handler returns `true`, then values from `newDate` object are used
401
+ **Properties**
352
402
 
353
- | Param | Type | Description |
354
- | --- | --- | --- |
355
- | picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
356
- | result | [<code>InputViolation</code>](#InputViolation) | The violation object, see example of `validateInput()` |
357
- | 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 |
358
410
 
359
411
  **Example**
360
412
  ```js
361
- $('#picker').daterangepicker({
413
+ daterangepicker('#picker', {
362
414
  startDate: DateTime.now(),
363
415
  // allow only dates from current year
364
416
  minDate: DateTime.now().startOf('year'),
@@ -367,179 +419,212 @@ $('#picker').daterangepicker({
367
419
  locale: {
368
420
  format: DateTime.DATETIME_SHORT
369
421
  }
370
- }).on('violated.daterangepicker', (ev, picker, result, newDate) => {
371
- newDate.startDate = DateTime.now().minus({ days: 3 }).startOf('day');
372
- return true;
422
+ }).addEventListener('violate', (ev) => {
423
+ ev.newDate.startDate = DateTime.now().minus({ days: 3 }).startOf('day');
424
+ ev.preventDefault();
373
425
  });
374
426
 
375
427
  // Try to set date outside permitted range at <input> elemet
376
- $('#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'));
377
431
  // Try to set date outside permitted range by code
378
- const drp = $('#picker').data('daterangepicker').setStartDate(DateTime.now().minus({ years: 10 })
432
+ const drp = getDateRangePicker('#picker');
433
+ drp.setStartDate(DateTime.now().minus({ years: 10 });
379
434
 
380
435
  // -> Calendar selects and shows "today - 3 days"
381
436
  ```
382
- <a name="event_beforeRenderCalendar.daterangepicker"></a>
437
+ <a name="event_beforeRenderCalendar"></a>
383
438
 
384
- ## "beforeRenderCalendar.daterangepicker" (this)
439
+ ## "beforeRenderCalendar"
385
440
  Emitted before the calendar time picker is rendered.
386
441
 
387
442
  **Kind**: event emitted
443
+ **Properties**
388
444
 
389
- | Param | Type | Description |
445
+ | Name | Type | Description |
390
446
  | --- | --- | --- |
391
- | 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 |
392
449
 
393
- <a name="event_beforeRenderCalendar.daterangepicker"></a>
450
+ <a name="event_beforeRenderCalendar"></a>
394
451
 
395
- ## "beforeRenderCalendar.daterangepicker" (this)
452
+ ## "beforeRenderCalendar"
396
453
  Emitted before the calendar is rendered. Useful to remove any manually added elements.
397
454
 
398
455
  **Kind**: event emitted
456
+ **Properties**
399
457
 
400
- | Param | Type | Description |
458
+ | Name | Type | Description |
401
459
  | --- | --- | --- |
402
- | 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 |
403
462
 
404
- <a name="event_show.daterangepicker"></a>
463
+ <a name="event_show"></a>
405
464
 
406
- ## "show.daterangepicker" (this)
465
+ ## "show"
407
466
  Emitted when the picker is shown
408
467
 
409
468
  **Kind**: event emitted
469
+ **Properties**
410
470
 
411
- | Param | Type | Description |
471
+ | Name | Type | Description |
412
472
  | --- | --- | --- |
413
- | 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 |
414
475
 
415
- <a name="event_beforeHide.daterangepicker"></a>
476
+ <a name="event_beforeHide"></a>
416
477
 
417
- ## "beforeHide.daterangepicker" (this) ⇒ <code>boolean</code>
418
- Emitted before the picker will hide. When EventHandler returns `true`, then picker remains visible
478
+ ## "beforeHide"
479
+ Emitted before the picker will hide.
419
480
 
420
481
  **Kind**: event emitted
421
- **Returns**: <code>boolean</code> - cancel - If `true`, then the picker remains visible
482
+ **Properties**
422
483
 
423
- | Param | Type | Description |
424
- | --- | --- | --- |
425
- | 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()` |
426
489
 
427
- <a name="event_hide.daterangepicker"></a>
490
+ <a name="event_hide"></a>
428
491
 
429
- ## "hide.daterangepicker" (this)
492
+ ## "hide"
430
493
  Emitted when the picker is hidden
431
494
 
432
495
  **Kind**: event emitted
496
+ **Properties**
433
497
 
434
- | Param | Type | Description |
498
+ | Name | Type | Description |
435
499
  | --- | --- | --- |
436
- | 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 |
437
502
 
438
- <a name="event_showCalendar.daterangepicker"></a>
503
+ <a name="event_showCalendar"></a>
439
504
 
440
- ## "showCalendar.daterangepicker" (this)
505
+ ## "showCalendar"
441
506
  Emitted when the calendar(s) are shown.
442
507
  Only useful when [Ranges](#Ranges) are used.
443
508
 
444
509
  **Kind**: event emitted
510
+ **Properties**
445
511
 
446
- | Param | Type | Description |
512
+ | Name | Type | Description |
447
513
  | --- | --- | --- |
448
- | 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 |
449
516
 
450
- <a name="event_hideCalendar.daterangepicker"></a>
517
+ <a name="event_hideCalendar"></a>
451
518
 
452
- ## "hideCalendar.daterangepicker" (this)
519
+ ## "hideCalendar"
453
520
  Emitted when the calendar(s) are hidden. Only used when [Ranges](#Ranges) are used.
454
521
 
455
522
  **Kind**: event emitted
523
+ **Properties**
456
524
 
457
- | Param | Type | Description |
525
+ | Name | Type | Description |
458
526
  | --- | --- | --- |
459
- | 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 |
460
529
 
461
- <a name="event_outsideClick.daterangepicker"></a>
530
+ <a name="event_outsideClick"></a>
462
531
 
463
- ## "outsideClick.daterangepicker" (this)
532
+ ## "outsideClick"
464
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.
465
534
 
466
535
  **Kind**: event emitted
536
+ **Properties**
467
537
 
468
- | Param | Type | Description |
538
+ | Name | Type | Description |
469
539
  | --- | --- | --- |
470
- | 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 |
471
542
 
472
- <a name="event_dateChange.daterangepicker"></a>
543
+ <a name="event_dateChange"></a>
473
544
 
474
- ## "dateChange.daterangepicker" (this, side)
475
- 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
476
547
 
477
548
  **Kind**: event emitted
549
+ **Properties**
478
550
 
479
- | Param | Type | Description |
551
+ | Name | Type | Description |
480
552
  | --- | --- | --- |
481
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
482
- | 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 |
483
556
 
484
- <a name="event_timeChange.daterangepicker"></a>
557
+ <a name="event_timeChange"></a>
485
558
 
486
- ## "timeChange.daterangepicker" (this, side)
559
+ ## "timeChange"
487
560
  Emitted when the time changed. Does not trigger when date is changed
488
561
 
489
562
  **Kind**: event emitted
563
+ **Properties**
490
564
 
491
- | Param | Type | Description |
565
+ | Name | Type | Description |
492
566
  | --- | --- | --- |
493
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
494
- | 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 |
495
570
 
496
- <a name="event_apply.daterangepicker"></a>
571
+ <a name="event_apply"></a>
497
572
 
498
- ## "apply.daterangepicker" (this)
573
+ ## "apply"
499
574
  Emitted when the `Apply` button is clicked, or when a predefined [Ranges](#Ranges) is clicked
500
575
 
501
576
  **Kind**: event emitted
577
+ **Properties**
502
578
 
503
- | Param | Type | Description |
579
+ | Name | Type | Description |
504
580
  | --- | --- | --- |
505
- | 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 |
506
583
 
507
- <a name="event_cancel.daterangepicker"></a>
584
+ <a name="event_cancel"></a>
508
585
 
509
- ## "cancel.daterangepicker" (this)
586
+ ## "cancel"
510
587
  Emitted when the `Cancel` button is clicked
511
588
 
512
589
  **Kind**: event emitted
590
+ **Properties**
513
591
 
514
- | Param | Type | Description |
592
+ | Name | Type | Description |
515
593
  | --- | --- | --- |
516
- | 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 |
517
596
 
518
- <a name="event_inputChanged.daterangepicker"></a>
597
+ <a name="event_inputChange"></a>
519
598
 
520
- ## "inputChanged.daterangepicker" (this)
599
+ ## "inputChange"
521
600
  Emitted when the date is changed through `<input>` element. Event is only triggered when date string is valid and date value has changed
522
601
 
523
602
  **Kind**: event emitted
603
+ **Properties**
524
604
 
525
- | Param | Type | Description |
605
+ | Name | Type | Description |
526
606
  | --- | --- | --- |
527
- | 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 |
528
609
 
529
- <a name="event_monthViewChanged.daterangepicker"></a>
610
+ <a name="event_monthViewChange"></a>
530
611
 
531
- ## "monthViewChanged.daterangepicker" (this)
612
+ ## "monthViewChange"
532
613
  Emitted after month view changed, for example by click on 'prev' or 'next'
533
614
 
534
615
  **Kind**: event emitted
616
+ **Properties**
535
617
 
536
- | Param | Type | Description |
618
+ | Name | Type | Description |
537
619
  | --- | --- | --- |
538
- | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
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 |
539
624
 
540
- <a name="event_beforeRenderTimePicker.daterangepicker"></a>
625
+ <a name="event_beforeRenderTimePicker"></a>
541
626
 
542
- ## "beforeRenderTimePicker.daterangepicker" (this)
627
+ ## "beforeRenderTimePicker" (this)
543
628
  Emitted before the TimePicker is rendered.
544
629
  Useful to remove any manually added elements.
545
630
 
@@ -559,7 +644,7 @@ Options for DateRangePicker
559
644
 
560
645
  | Name | Type | Default | Description |
561
646
  | --- | --- | --- | --- |
562
- | 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 |
563
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. |
564
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> |
565
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`. |
@@ -578,25 +663,21 @@ Options for DateRangePicker
578
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` |
579
664
  | timePicker | <code>boolean</code> | <code>false</code> | Adds select boxes to choose times in addition to dates |
580
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). |
581
- | 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` |
582
- | timePickerSeconds | <code>boolean</code> | <code>boolean</code> | **Deprecated**, use `timePickerStepSize`<br>Show seconds in the timePicker |
583
- | 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. |
584
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`. |
585
- | 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. |
586
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 |
587
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> |
588
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> |
589
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)` |
590
- | 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']` |
591
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()` |
592
- | ~~warnings~~ | <code>boolean</code> | | Not used anymore. Listen to event `violated.daterangepicker` to react on invalid input data |
593
675
  | applyButtonClasses | <code>string</code> | <code>&quot;btn-primary&quot;</code> | CSS class names that will be added only to the apply button |
594
676
  | cancelButtonClasses | <code>string</code> | <code>&quot;btn-default&quot;</code> | CSS class names that will be added only to the cancel button |
595
677
  | buttonClasses | <code>string</code> | | Default: `'btn btn-sm'`<br>CSS class names that will be added to both the apply and cancel buttons. |
596
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. |
597
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. |
598
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. |
599
- | externalStyle | <code>string</code> | <code>null</code> | External CSS Framework to style the picker. Currently only `'bulma'` is supported. |
600
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'` |
601
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'` |
602
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. |
@@ -615,6 +696,7 @@ Options for DateRangePicker
615
696
  | locale.cancelLabel | <code>string</code> | <code>&quot;Cancel&quot;</code> | Label of `Cancel` Button |
616
697
  | locale.customRangeLabel | <code>string</code> | <code>&quot;Custom&quot;</code> | Range - Title for custom ranges |
617
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 | | | |
618
700
 
619
701
  <a name="Ranges"></a>
620
702
 
@@ -658,20 +740,22 @@ A single predefined range
658
740
  ```js
659
741
  { Today: [DateTime.now().startOf('day'), DateTime.now().endOf('day')] }
660
742
  ```
661
- <a name="InputViolation"></a>
743
+ <a name="NewDate"></a>
662
744
 
663
- ## InputViolation : <code>Object</code>
745
+ ## NewDate : <code>Object</code>
664
746
  **Kind**: global typedef
665
747
  **Properties**
666
748
 
667
749
  | Name | Type | Description |
668
750
  | --- | --- | --- |
669
- | startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Violation of startDate |
670
- | endDate? | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| <code>undefined</code> | Violation of endDate, if existing |
671
- | violations | <code>Array</code> | The constraints which violates the input |
672
- | reason | <code>Array</code> | The type/reson of violation |
751
+ | reason | <code>string</code> | The type/reason of violation |
673
752
  | old | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Old value startDate/endDate |
674
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 |
675
759
 
676
760
  <a name="callback"></a>
677
761