@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/README.md CHANGED
@@ -18,20 +18,16 @@ Above samples are based on the [original repository](https://github.com/dangross
18
18
 
19
19
  #### Global import with `<script>` tags
20
20
  ```html
21
- <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
22
21
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
23
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.18.0/dist/global/daterangepicker.min.js"></script>
24
- <link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.18.0/css/daterangepicker.min.css" rel="stylesheet" />
22
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.0-beta/dist/global/daterangepicker.min.js"></script>
23
+ <link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.0-beta/css/daterangepicker.min.css" rel="stylesheet" />
25
24
 
26
25
  <input type="text" id="picker" />
27
26
 
28
27
  <script type="text/javascript">
29
28
  const DateTime = luxon.DateTime;
30
-
31
- $(function() {
32
- $('#picker').daterangepicker({
33
- startDate: DateTime.now().plus({day: 1})
34
- });
29
+ DateRangePicker.daterangepicker('#picker', {
30
+ startDate: DateTime.now().plus({day: 1})
35
31
  });
36
32
  </script>
37
33
  ```
@@ -41,42 +37,38 @@ Above samples are based on the [original repository](https://github.com/dangross
41
37
  <script type="importmap">
42
38
  {
43
39
  "imports": {
44
- "jquery": "https://cdn.jsdelivr.net/npm/jquery@4.0.0/+esm",
45
40
  "luxon": "https://cdn.jsdelivr.net/npm/luxon@3.7.2/+esm",
46
- "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.18.0/+esm"
41
+ "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.0-beta/+esm"
47
42
  }
48
43
  }
49
44
  </script>
50
- <link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.18.0/css/daterangepicker.min.css" rel="stylesheet" />
45
+ <link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.0-beta/css/daterangepicker.min.css" rel="stylesheet" />
51
46
 
52
47
  <input type="text" id="picker" />
53
48
 
54
49
  <script type="module">
55
- import { $ } from 'jquery';
56
50
  import { DateTime } from 'luxon';
57
- import DateRangePicker from 'daterangepicker';
51
+ import { daterangepicker } from 'daterangepicker';
58
52
 
59
- $(function() {
60
- $('#picker').daterangepicker({
61
- startDate: DateTime.now().plus({day: 1})
62
- });
53
+ daterangepicker('#picker', {
54
+ startDate: DateTime.now().plus({day: 1})
63
55
  });
64
56
  </script>
65
57
  ```
66
58
 
67
59
  #### Style with Bulma
68
60
  ```html
69
- <script ...></script>
61
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
62
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.0-beta/dist/global/daterangepicker.min.js"></script>
70
63
  <link type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" rel="stylesheet" />
71
- <link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.18.0/css/daterangepicker.bulma.min.css" rel="stylesheet" />
64
+ <link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.0-beta/css/daterangepicker.bulma.min.css" rel="stylesheet" />
72
65
 
73
66
  <input type="text" id="picker" />
74
67
 
75
68
  <script type="text/javascript">
76
- $(function() {
77
- $('#picker').daterangepicker({
78
- externalStyle: 'bulma'
79
- });
69
+ const DateTime = luxon.DateTime;
70
+ DateRangePicker.daterangepicker('#picker', {
71
+ startDate: DateTime.now().plus({day: 1})
80
72
  });
81
73
  </script>
82
74
  ```
@@ -87,18 +79,107 @@ Above samples are based on the [original repository](https://github.com/dangross
87
79
  <input type="text" id="picker" data-start-date="2026-02-01" data-end-date="2026-02-20" data-show-week-numbers="true" />
88
80
 
89
81
  <script type="text/javascript">
82
+ const options = {timePicker: true};
83
+ DateRangePicker.daterangepicker('#picker', options);
84
+ </script>
85
+ ```
86
+ See [HTML5 data-* Attributes](https://api.jquery.com/data/#data-html5)<br/>
87
+ Values in `options` of `daterangepicker(el, options)` take precedence over `data-*` attributes.
88
+
89
+ #### Access the DateRangePicker Instance
90
+ ```html
91
+ <input type="text" id="picker" />
92
+
93
+ <script type="module">
94
+ import {daterangepicker, getDateRangePicker} from 'daterangepicker'; // or global import with <script> tag
95
+
96
+ const input = daterangepicker('#picker', {}); // returns the mutated <input> HTMLElement
97
+ // or daterangepicker(document.querySelector('#picker'), {})
98
+
99
+ const drp = getDateRangePicker('#picker');
100
+ // or DateRangePicker.getDateRangePicker('#picker'); if imported globally with <script> tag
101
+
102
+ console.log( drp.startDate.toString()) // prints the selected startDate
103
+ console.log( drp === input._daterangepicker) // prints 'true'
104
+ console.log( drp.element === input) // prints 'true'
105
+ console.log( document.querySelector('#picker') === input) // prints 'true'
106
+ </script>
107
+ ```
108
+
109
+ #### Upgrade from daterangepicker version 4.x -> 5.x
110
+
111
+ In version 5.x jQuery dependency has been removed. Version 4.x is available at branch [4.x-jQuery](tree/4.x-jQuery) but new features will not added anymore to this branch.<br>
112
+ Unlesss you work with Events, you should not face any difference between version 4.x and 5.x.
113
+ Initialisation with jQuery is supported in version 5.x
114
+
115
+ ```html
116
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
117
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
118
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.0-beta/dist/global/daterangepicker.min.js"></script>
119
+ <link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.0-beta/css/daterangepicker.min.css" rel="stylesheet" />
120
+
121
+ <input type="text" id="picker" />
122
+
123
+ <script type="text/javascript">
124
+ const DateTime = luxon.DateTime;
125
+
126
+ // if you like to work with jQuery in version 5.x
90
127
  $(function() {
91
- $('#picker').daterangepicker();
128
+ $('#picker').daterangepicker({
129
+ startDate: DateTime.now().plus({day: 1})
130
+ });
131
+ }).on('beforeHide', (ev) => {
132
+ console.log(ev.originalEvent.picker.startDate.toString());
133
+ ev.preventDefault(); // -> do not hide the picker
92
134
  });
93
135
  </script>
94
136
  ```
95
- See [HTML5 data-* Attributes](https://api.jquery.com/data/#data-html5)<br/>
96
- Options in `daterangepicker({...})` take precedence over `data-*` attributes.
137
+
138
+ In case you work with Events there are a few minor changes:
139
+ ```js
140
+ // version 4.x - with jQuery
141
+ $('#picker').daterangepicker({
142
+ startDate: DateTime.now(),
143
+ // allow only dates from current year
144
+ minDate: DateTime.now().startOf('year'),
145
+ manDate: DateTime.now().endOf('year'),
146
+ singleDatePicker: true
147
+ }).on('violate.daterangepicker', (ev, picker, result, newDate) => {
148
+ newDate.startDate = DateTime.now().minus({ days: 3 }).startOf('day');
149
+ return true;
150
+ }).on('show.daterangepicker', (ev, picker) => {
151
+ console.log('Show the picker')
152
+ }).on('beforeHide.daterangepicker', (ev, picker) => {
153
+ console.log(picker.startDate.toString());
154
+ return true; // -> do not hide the picker
155
+ });
156
+
157
+ // version 5.x - without jQuery
158
+ const input = daterangepicker('#picker', { // or DateRangePicker.daterangepicker('#picker', ...
159
+ startDate: DateTime.now(),
160
+ // allow only dates from current year
161
+ minDate: DateTime.now().startOf('year'),
162
+ manDate: DateTime.now().endOf('year'),
163
+ singleDatePicker: true
164
+ });
165
+
166
+ input.addEventListener('violate', (ev) => {
167
+ ev.newDate.startDate = DateTime.now().minus({ days: 3 }).startOf('day');
168
+ ev.preventDefault();
169
+ });
170
+ input.addEventListener('show', (ev) => {
171
+ console.log('Show the picker')
172
+ });
173
+ input.addEventListener('beforeHide', (ev) => {
174
+ console.log(ev.picker.startDate.toString());
175
+ ev.preventDefault(); // -> do not hide the picker
176
+ });
177
+ ```
97
178
 
98
179
 
99
180
 
100
181
  ## Examples
101
- ### `ranges`
182
+ ### Option `ranges`
102
183
  <a name="options-ranges"></a>
103
184
  ```js
104
185
  range: {
@@ -112,14 +193,14 @@ range: {
112
193
  alwaysShowCalendars: true
113
194
  ```
114
195
 
115
- ### `isInvalidDate`
196
+ ### Option `isInvalidDate`
116
197
  ```js
117
198
  isInvalidDate: function(date) {
118
- return date.isWeekend;
199
+ return date.isWeekend; // see https://moment.github.io/luxon/api-docs/index.html#datetimeisweekend
119
200
  }
120
201
  ```
121
202
 
122
- ### `isInvalidTime`
203
+ ### Option `isInvalidTime`
123
204
  ```js
124
205
  isInvalidTime: (time, side, unit) => {
125
206
  if (unit == 'hour') {
@@ -130,7 +211,7 @@ isInvalidTime: (time, side, unit) => {
130
211
  }
131
212
  ```
132
213
 
133
- ### `isCustomDate`
214
+ ### Option `isCustomDate`
134
215
  ```js
135
216
  .daterangepicker-bank-day {
136
217
  color: red;
@@ -174,41 +255,36 @@ Compared to [inital repository](https://github.com/dangrossman/daterangepicker),
174
255
  - Option `autoUpdateInput` defines whether the attached `<input>` element is updated when the user clicks on a date value.<br>
175
256
  In original daterangepicker this parameter defines whether the `<input>` is updated when the user clicks on `Apply` button.
176
257
  - Added option `locale.durationFormat` to show customized label for selected duration, e.g. `'4 Days, 6 Hours, 30 Minutes'`
177
- - Added option `externalStyle` to use daterangepicker with external CSS Frameworks. Currently only [Bulma](https://bulma.io/) is supported<br>
258
+ - Support styling with 3rd party CSS Frameworks. Currently only [Bulma](https://bulma.io/) is supported<br>
178
259
  but other frameworks may be added in future releases
179
260
  - [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) Module Import
180
261
  - [Jest](https://jestjs.io/) unit testing
262
+ - Removed dependency from [jQuery](https://jquery.com/)
181
263
  - ... and maybe some new bugs 😉
182
264
 
183
265
  ### Localization
184
266
  All date values are based on [luxon](https://moment.github.io/luxon/index.html#/intl) which provides great support for localization. Instead of providing date format, weekday and month names manually as strings, it is usually easier to set the default locale like this:
185
267
  ```js
186
- $(function () {
187
- const Settings = luxon.Settings;
188
- Settings.defaultLocale = 'fr-CA'
189
-
190
- $('#picker').daterangepicker({
191
- timePicker: true,
192
- singleDatePicker: false
193
- };
194
- });
268
+ const Settings = luxon.Settings;
269
+ Settings.defaultLocale = 'fr-CA'
195
270
 
271
+ daterangepicker('#picker', {
272
+ timePicker: true,
273
+ singleDatePicker: false
274
+ };
196
275
  ```
197
276
  instead of
198
277
  ```js
199
- $(function () {
200
- $('#picker').daterangepicker({
201
- timePicker: true,
202
- singleDatePicker: false,
203
- locale: {
204
- format: 'yyyyy-M-d H h m',
205
- daysOfWeek: [ 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.', 'dim.' ],
206
- monthNames: [ "janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre" ],
207
- firstDay: 7
208
- }
209
- };
210
- });
211
-
278
+ daterangepicker('#picker', {
279
+ timePicker: true,
280
+ singleDatePicker: false,
281
+ locale: {
282
+ format: 'yyyyy-M-d H h m',
283
+ daysOfWeek: [ 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.', 'dim.' ],
284
+ monthNames: [ "janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre" ],
285
+ firstDay: 7
286
+ }
287
+ };
212
288
  ```
213
289
 
214
290
  ### Style and themes
@@ -222,41 +298,7 @@ You can style this daterangepicker with [Bulma CSS Framework](https://bulma.io/)
222
298
 
223
299
  ## Methods
224
300
 
225
- Available methods are listed below in [API documentation](#DateRangePicker). You will mainly use
226
- * [.daterangepicker(options, callback)](#DateRangePicker.daterangepicker)
227
- * [.setStartDate(startDate)](#DateRangePicker+setStartDate)
228
- * [.setRange(startDate, endDate)](#DateRangePicker+setRange)
229
- * `$(...).data('daterangepicker')` to get the daterangepicker object
230
-
231
- all other methods are used rarely.
232
-
233
- ### Differences between `moment` and `luxon` library
234
- This table lists a few important differences between datarangepicker using moment and luxon. Check them carefully when you migrate from older daterangepicker.
235
-
236
- | Parameter | moment | luxon |
237
- | ----------------------- | --------------------------------------------------- | ----------------- |
238
- | `locale.daysOfWeek` | [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] | [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] |
239
- | `locale.firstDay` | 0-6 (Sunday to Saturday) | 1 for Monday through 7 for Sunday |
240
- | to ISO-8601 String | `toISOString()` | `toISO()` |
241
- | to [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) Object | `toDate()` | `toJSDate()` |
242
- | from ISO-8601 String | `moment(...)` | `DateIme.fromISO(...)` |
243
- | from [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) Object | `moment(...)` | `DateIme.fromJSDate(...)` |
244
- | current day | `moment()` | `DateTime.now()` |
245
- | format to string | `format(...)` | `toFormat(...)` |
246
- | format tokens | `'YYYY-MM-DD'` | `'yyyy-MM-dd'` |
247
-
248
-
249
- ## License
250
-
251
- The MIT License (MIT)
252
-
253
- Copyright (c) 2012-2019 Dan Grossman<br/>
254
- Copyright (c) 2025 Wernfried Domscheit
255
-
256
- Licensed under the [MIT license](LICENSE).
257
-
258
- ## API Documentation
259
- [API Documentation](API_Doc.md)
301
+ Available methods are listed in detail at [API Documentation](API_Doc.md). You will mainly use
260
302
  ## Options
261
303
  Options for DateRangePicker
262
304
 
@@ -265,7 +307,7 @@ Options for DateRangePicker
265
307
 
266
308
  | Name | Type | Default | Description |
267
309
  | --- | --- | --- | --- |
268
- | 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 |
310
+ | 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 |
269
311
  | 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. |
270
312
  | 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> |
271
313
  | 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`. |
@@ -284,25 +326,21 @@ Options for DateRangePicker
284
326
  | 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` |
285
327
  | timePicker | <code>boolean</code> | <code>false</code> | Adds select boxes to choose times in addition to dates |
286
328
  | 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). |
287
- | 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` |
288
- | timePickerSeconds | <code>boolean</code> | <code>boolean</code> | **Deprecated**, use `timePickerStepSize`<br>Show seconds in the timePicker |
289
- | timePickerIncrement | <code>boolean</code> | <code>1</code> | **Deprecated**, use `timePickerStepSize`<br>Increment of the minutes selection list for times |
329
+ | 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. |
290
330
  | 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`. |
291
- | 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. |
331
+ | 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. |
292
332
  | 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 |
293
333
  | 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> |
294
334
  | 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> |
295
335
  | 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)` |
296
- | 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']` |
336
+ | 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']` |
297
337
  | 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()` |
298
- | ~~warnings~~ | <code>boolean</code> | | Not used anymore. Listen to event `violated.daterangepicker` to react on invalid input data |
299
338
  | applyButtonClasses | <code>string</code> | <code>&quot;btn-primary&quot;</code> | CSS class names that will be added only to the apply button |
300
339
  | cancelButtonClasses | <code>string</code> | <code>&quot;btn-default&quot;</code> | CSS class names that will be added only to the cancel button |
301
340
  | buttonClasses | <code>string</code> | | Default: `'btn btn-sm'`<br>CSS class names that will be added to both the apply and cancel buttons. |
302
341
  | 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. |
303
342
  | 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. |
304
343
  | 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. |
305
- | externalStyle | <code>string</code> | <code>null</code> | External CSS Framework to style the picker. Currently only `'bulma'` is supported. |
306
344
  | 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'` |
307
345
  | 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'` |
308
346
  | 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. |
@@ -321,72 +359,3 @@ Options for DateRangePicker
321
359
  | locale.cancelLabel | <code>string</code> | <code>&quot;Cancel&quot;</code> | Label of `Cancel` Button |
322
360
  | locale.customRangeLabel | <code>string</code> | <code>&quot;Custom&quot;</code> | Range - Title for custom ranges |
323
361
  | 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) => {}` |
324
-
325
- <a name="Ranges"></a>
326
-
327
- ## Ranges : <code>Object</code>
328
- A set of predefined ranges.<br>
329
- Ranges are not validated against `minDate`, `maxDate`, `minSpan`, `maxSpan` or `timePickerStepSize ` constraints.
330
-
331
- **Kind**: global typedef
332
- **Properties**
333
-
334
- | Name | Type | Description |
335
- | --- | --- | --- |
336
- | name | <code>string</code> | The name of the range |
337
- | range | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | Array of 2 elements with `startDate` and `endDate` |
338
-
339
- **Example**
340
- ```js
341
- {
342
- 'Today': [DateTime.now().startOf('day'), DateTime.now().endOf('day')],
343
- 'Yesterday': [DateTime.now().startOf('day').minus({days: 1}), DateTime.now().minus({days: 1}).endOf('day')],
344
- 'Last 7 Days': [DateTime.now().startOf('day').minus({days: 6}), DateTime.now()],
345
- 'Last 30 Days': [DateTime.now().startOf('day').minus({days: 29}), DateTime.now()],
346
- 'This Month': [DateTime.now().startOf('day').startOf('month'), DateTime.now().endOf('month')],
347
- 'Last Month': [DateTime.now().startOf('day').minus({months: 1}).startOf('month'), DateTime.now().minus({months: 1}).endOf('month')]
348
- }
349
- ```
350
- <a name="Range"></a>
351
-
352
- ## Range : <code>Object</code>
353
- A single predefined range
354
-
355
- **Kind**: global typedef
356
- **Properties**
357
-
358
- | Name | Type | Description |
359
- | --- | --- | --- |
360
- | name | <code>string</code> | The name of the range |
361
- | range | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> | Array of 2 elements with startDate and endDate |
362
-
363
- **Example**
364
- ```js
365
- { Today: [DateTime.now().startOf('day'), DateTime.now().endOf('day')] }
366
- ```
367
- <a name="InputViolation"></a>
368
-
369
- ## InputViolation : <code>Object</code>
370
- **Kind**: global typedef
371
- **Properties**
372
-
373
- | Name | Type | Description |
374
- | --- | --- | --- |
375
- | startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Violation of startDate |
376
- | endDate? | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| <code>undefined</code> | Violation of endDate, if existing |
377
- | violations | <code>Array</code> | The constraints which violates the input |
378
- | reason | <code>Array</code> | The type/reson of violation |
379
- | old | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Old value startDate/endDate |
380
- | new? | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Corrected value of startDate/endDate if existing |
381
-
382
- <a name="callback"></a>
383
-
384
- ## callback : <code>function</code>
385
- **Kind**: global typedef
386
-
387
- | Param | Type | Description |
388
- | --- | --- | --- |
389
- | startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Selected startDate |
390
- | endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | Selected endDate |
391
- | range | <code>string</code> | |
392
-