daterangepicker-4.x 4.7.0 → 4.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -18,8 +18,8 @@ Above samples are based on the [original repository](https://github.com/dangross
18
18
  ```html
19
19
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
20
20
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
21
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.7.0/daterangepicker.min.js"></script>
22
- <link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.7.0/daterangepicker.min.css" rel="stylesheet" />
21
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.8.2/daterangepicker.min.js"></script>
22
+ <link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.8.2/daterangepicker.min.css" rel="stylesheet" />
23
23
 
24
24
  <input type="text" id="daterange" />
25
25
 
@@ -99,6 +99,7 @@ Compared to [inital repository](https://github.com/dangrossman/daterangepicker),
99
99
  - Added method `setRange(startDate, endDate)` to combine `setStartDate(startDate)` and `setEndDate(endDate)`
100
100
  - Added option `minSpan` similar to `maxSpan`
101
101
  - Added option `isInvalidTime` similar to `isInvalidDate`
102
+ - Added option `altInput` and `altFormat` to provide an alternative output element for selected date value
102
103
  - Added option `onOutsideClick` where you can define whether picker shall apply or revert selected value
103
104
  - Added option `initalMonth` to show datepicker without an initial date
104
105
  - Added option `singleMonthView` to show single month calendar, useful for shorter ranges
@@ -583,14 +584,14 @@ Options for DateRangePicker
583
584
 
584
585
  | Name | Type | Default | Description |
585
586
  | --- | --- | --- | --- |
586
- | parentEl | <code>string</code> | <code>&quot;body&quot;</code> | [jQuery](jQuery) selector of the parent element that the date range picker will be added to |
587
- | 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> | | 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](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. |
588
- | 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](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/> |
589
- | 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](ISO-8601) or a string matching `locale.format`. |
590
- | maxDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | The latest date a user may select or `null` for no limit.<br/> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or a string matching `locale.format`. |
591
- | minSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The maximum span between the selected start and end dates.<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](ISO-8601) duration.<br/> Ignored when `singleDatePicker: true` |
592
- | maxSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The minimum span between the selected start and end dates.<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](ISO-8601) duration.<br/> Ignored when `singleDatePicker: true` |
593
- | initalMonth | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | Default: `DateTime.now().startOf('month')`<br/> The inital month shown when `startDate: null`. Be aware, the attached `<input>` element must be also empty.`<br/> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](ISO-8601) or a string matching `locale.format`.<br/> When `initalMonth` is used, then `endDate` is ignored and it works only with `timePicker: false` |
587
+ | 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 |
588
+ | 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> | | 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. |
589
+ | 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/> |
590
+ | 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`. |
591
+ | maxDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | The latest date a user may select or `null` for no limit.<br/> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`. |
592
+ | minSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The maximum span between the selected start and end dates.<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br/> Ignored when `singleDatePicker: true` |
593
+ | maxSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> | | The minimum span between the selected start and end dates.<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br/> Ignored when `singleDatePicker: true` |
594
+ | initalMonth | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> | | Default: `DateTime.now().startOf('month')`<br/> The inital month shown when `startDate: null`. Be aware, the attached `<input>` element must be also empty.`<br/> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br/> When `initalMonth` is used, then `endDate` is ignored and it works only with `timePicker: false` |
594
595
  | autoApply | <code>boolean</code> | <code>false</code> | Hide the `Apply` and `Cancel` buttons, and automatically apply a new date range as soon as two dates are clicked.<br/> Only useful when `timePicker: false` |
595
596
  | singleDatePicker | <code>boolean</code> | <code>false</code> | Show only a single calendar to choose one date, instead of a range picker with two calendars.<br/> The start and end dates provided to your callback will be the same single date chosen. |
596
597
  | singleMonthView | <code>boolean</code> | <code>false</code> | Show only a single month calendar, useful when typically selected ranges are rather short.<br/> Ignored for `singleDatePicker: true`. |
@@ -601,7 +602,7 @@ Options for DateRangePicker
601
602
  | 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` |
602
603
  | timePicker | <code>boolean</code> | <code>false</code> | Adds select boxes to choose times in addition to dates |
603
604
  | timePicker24Hour | <code>boolean</code> | <code>true</code> | Use 24-hour instead of 12-hour times, removing the AM/PM selection |
604
- | 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](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` |
605
+ | 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` |
605
606
  | timePickerSeconds | <code>boolean</code> | <code>boolean</code> | **Deprecated**, use `timePickerStepSize`<br/>Show seconds in the timePicker |
606
607
  | timePickerIncrement | <code>boolean</code> | <code>1</code> | **Deprecated**, use `timePickerStepSize`<br/>Increment of the minutes selection list for times |
607
608
  | 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`. |
@@ -610,6 +611,8 @@ Options for DateRangePicker
610
611
  | isInvalidDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed,<br/> and may return `true` or `false` to indicate whether that date should be available for selection or not.<br/> Signature: `isInvalidDate(date)`<br/> Function has no effect on date values set by `startDate`, `endDate`, `ranges`, [setStartDate](#DateRangePicker+setStartDate), [setEndDate](#DateRangePicker+setEndDate). |
611
612
  | isInvalidTime | <code>function</code> | <code>false</code> | A function that is passed each hour/minute/second/am-pm in the two calendars before they are displayed,<br/> and may return `true` or `false` to indicate whether that date should be available for selection or not.<br/> Signature: `isInvalidTime(time, side, unit)`<br/> `side` is `'start'` or `'end'` or `null` for `singleDatePicker: true`<br/> `unit` is `'hour'`, `'minute'`, `'second'` or `'ampm'`<br/> Hours are always given as 24-hour clock<br/> Function has no effect on time values set by `startDate`, `endDate`, `ranges`, [setStartDate](#DateRangePicker+setStartDate), [setEndDate](#DateRangePicker+setEndDate).<br/> Ensure that your function returns `false` for at least one item. Otherwise the calender is not rendered.<br/> |
612
613
  | 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)` |
614
+ | altInput | <code>string</code> \| <code>Array</code> | <code>null</code> | A [jQuery selector](https://api.jquery.com/category/selectors/) string for an alternative ouput (typically hidden) `<input>` element. Requires `altFormat` to be set.<br/> Must be a single string for `singleDatePicker: true` or an array of two strings for `singleDatePicker: false`<br/> Example: `['#start', '#end']` |
615
+ | altFormat | <code>function</code> \| <code>string</code> | <code></code> | The output format used for `altInput`.<br/> Either a string used with [toFormat()](https://moment.github.io/luxon/api-docs/index.html#datetimetoformat) or a function.<br/> Examples: `'yyyyMMddHHmm'`, `(date) => date.toUnixInteger()` |
613
616
  | applyButtonClasses | <code>string</code> | <code>&quot;btn-primary&quot;</code> | CSS class names that will be added only to the apply button |
614
617
  | cancelButtonClasses | <code>string</code> | <code>&quot;btn-default&quot;</code> | CSS class names that will be added only to the cancel button |
615
618
  | buttonClasses | <code>string</code> | | Default: `'btn btn-sm'`<br/>CSS class names that will be added to both the apply and cancel buttons. |
@@ -37,32 +37,32 @@
37
37
  /**
38
38
  * Options for DateRangePicker
39
39
  * @typedef Options
40
- * @property {string} parentEl=body - {@link jQuery} selector of the parent element that the date range picker will be added to
40
+ * @property {string} parentEl=body - {@link https://api.jquery.com/category/selectors/|jQuery selector} of the parent element that the date range picker will be added to
41
41
 
42
42
  * @property {external:DateTime|external:Date|string} startDate - Default: `DateTime.now().startOf('day')`<br/>The beginning date of the initially selected date range.<br/>
43
- * Must be a `luxon.DateTime` or `Date` or `string` according to {@link ISO-8601} or a string matching `locale.format`.<br/>
43
+ * Must be a `luxon.DateTime` or `Date` or `string` according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} or a string matching `locale.format`.<br/>
44
44
  * Date value is rounded to match option `timePickerStepSize`<br/>
45
45
  * Option `isInvalidDate` and `isInvalidTime` are not evaluated, you may set date/time which is not selectable in calendar.<br/>
46
46
  * If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.
47
47
  * @property {external:DateTime|external:Date|string} endDate - Defautl: `DateTime.now().endOf('day')`<br/>The end date of the initially selected date range.<br/>
48
- * Must be a `luxon.DateTime` or `Date` or `string` according to {@link ISO-8601} or a string matching `locale.format`.<br/>
48
+ * Must be a `luxon.DateTime` or `Date` or `string` according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} or a string matching `locale.format`.<br/>
49
49
  * Date value is rounded to match option `timePickerStepSize`<br/>
50
50
  * Option `isInvalidDate`, `isInvalidTime` and `minSpan`, `maxSpan` are not evaluated, you may set date/time which is not selectable in calendar.<br/>
51
51
  * If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br/>
52
52
 
53
53
  * @property {external:DateTime|external:Date|string|null} minDate - The earliest date a user may select or `null` for no limit.<br/>
54
- * Must be a `luxon.DateTime` or `Date` or `string` according to {@link ISO-8601} or a string matching `locale.format`.
54
+ * Must be a `luxon.DateTime` or `Date` or `string` according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} or a string matching `locale.format`.
55
55
  * @property {external:DateTime|external:Date|string|null} maxDate - The latest date a user may select or `null` for no limit.<br/>
56
- * Must be a `luxon.DateTime` or `Date` or `string` according to {@link ISO-8601} or a string matching `locale.format`.
56
+ * Must be a `luxon.DateTime` or `Date` or `string` according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} or a string matching `locale.format`.
57
57
  * @property {external:Duration|string|number|null} minSpan - The maximum span between the selected start and end dates.<br/>
58
- * Must be a `luxon.Duration` or number of seconds or a string according to {@link ISO-8601} duration.<br/>
58
+ * Must be a `luxon.Duration` or number of seconds or a string according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} duration.<br/>
59
59
  * Ignored when `singleDatePicker: true`
60
60
  * @property {external:Duration|string|number|null} maxSpan - The minimum span between the selected start and end dates.<br/>
61
- * Must be a `luxon.Duration` or number of seconds or a string according to {@link ISO-8601} duration.<br/>
61
+ * Must be a `luxon.Duration` or number of seconds or a string according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} duration.<br/>
62
62
  * Ignored when `singleDatePicker: true`
63
63
  * @property {external:DateTime|external:Date|string|null} initalMonth - Default: `DateTime.now().startOf('month')`<br/>
64
64
  * The inital month shown when `startDate: null`. Be aware, the attached `<input>` element must be also empty.`<br/>
65
- * Must be a `luxon.DateTime` or `Date` or `string` according to {@link ISO-8601} or a string matching `locale.format`.<br/>
65
+ * Must be a `luxon.DateTime` or `Date` or `string` according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} or a string matching `locale.format`.<br/>
66
66
  * When `initalMonth` is used, then `endDate` is ignored and it works only with `timePicker: false`
67
67
 
68
68
  * @property {boolean} autoApply=false - Hide the `Apply` and `Cancel` buttons, and automatically apply a new date range as soon as two dates are clicked.<br/>
@@ -81,7 +81,7 @@
81
81
  * @property {boolean} timePicker=false - Adds select boxes to choose times in addition to dates
82
82
  * @property {boolean} timePicker24Hour=true - Use 24-hour instead of 12-hour times, removing the AM/PM selection
83
83
  * @property {external:Duration|string|number} timePickerStepSize - Default: `Duration.fromObject({minutes:1})`<br/>Set the time picker step size.<br/>
84
- * Must be a `luxon.Duration` or the number of seconds or a string according to {@link ISO-8601} duration.<br/>
84
+ * Must be a `luxon.Duration` or the number of seconds or a string according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} duration.<br/>
85
85
  * Valid values are 1,2,3,4,5,6,10,12,15,20,30 for `Duration.fromObject({seconds: ...})` and `Duration.fromObject({minutes: ...})`
86
86
  * and 1,2,3,4,6,(8,12) for `Duration.fromObject({hours: ...})`.<br/>
87
87
  * Duration must be greater than `minSpan` and smaller than `maxSpan`.<br/>
@@ -112,7 +112,14 @@
112
112
  * @property {function} isCustomDate=false - A function that is passed each date in the two calendars before they are displayed,
113
113
  * and may return a string or array of CSS class names to apply to that date's calendar cell.<br/>
114
114
  * Signature: `isCustomDate(date)`
115
-
115
+ * @property {string|Array} altInput=null - A {@link https://api.jquery.com/category/selectors/|jQuery selector} string for an alternative
116
+ * ouput (typically hidden) `<input>` element. Requires `altFormat` to be set.<br/>
117
+ * Must be a single string for `singleDatePicker: true` or an array of two strings for `singleDatePicker: false`<br/>
118
+ * Example: `['#start', '#end']`
119
+ * @property {function|string} altFormat=null - The output format used for `altInput`.<br/>
120
+ * Either a string used with {@link https://moment.github.io/luxon/api-docs/index.html#datetimetoformat|toFormat()} or a function.<br/>
121
+ * Examples: `'yyyyMMddHHmm'`, `(date) => date.toUnixInteger()`
122
+
116
123
  * @property {string} applyButtonClasses=btn-primary - CSS class names that will be added only to the apply button
117
124
  * @property {string} cancelButtonClasses=btn-default - CSS class names that will be added only to the cancel button
118
125
  * @property {string} buttonClasses - Default: `'btn btn-sm'`<br/>CSS class names that will be added to both the apply and cancel buttons.
@@ -223,6 +230,8 @@
223
230
  this.weekendDayClasses = 'weekend-day';
224
231
  this.todayClasses = 'today';
225
232
  this.warnings = true;
233
+ this.altInput = null;
234
+ this.altFormat = null;
226
235
  this.ranges = {};
227
236
 
228
237
  this.locale = {
@@ -508,6 +517,16 @@
508
517
  console.warn(`Set 'endDate' to ${this - this.logDate(endDate)} because it was earlier than 'startDate'`);
509
518
  }
510
519
 
520
+ if (['function', 'string'].includes(typeof options.altFormat))
521
+ this.altFormat = options.altFormat;
522
+ if (['object', 'string'].includes(typeof options.altInput) && options.altInput != null) {
523
+ if (this.singleDatePicker && typeof options.altInput === 'string') {
524
+ this.altInput = options.altInput
525
+ } else if (!this.singleDatePicker && Array.isArray(options.altInput) && options.altInput.length == 2) {
526
+ this.altInput = options.altInput;
527
+ }
528
+ }
529
+
511
530
  if (!this.startDate && this.initalMonth) {
512
531
  // No initial date selected
513
532
  this.endDate = null;
@@ -1502,7 +1521,7 @@
1502
1521
 
1503
1522
  //if (this.singleMonthView) // to do: localization options
1504
1523
  // html = `<span style="font-family: arial; font-size: 12px;">${side == 'start' ? 'Start' : 'End'}: </span>`;
1505
-
1524
+
1506
1525
  html += '<select class="hourselect">';
1507
1526
  const ampm = selected.toFormat('a', { locale: 'en-US' });
1508
1527
  let start = 0;
@@ -2476,6 +2495,23 @@
2476
2495
  if (newValue !== this.element.val())
2477
2496
  this.element.val(newValue).trigger('change');
2478
2497
  }
2498
+
2499
+ if (this.altInput != null && this.altFormat != null) {
2500
+ if (this.singleDatePicker) {
2501
+ if ($(this.altInput).is('input'))
2502
+ $(this.altInput).val(typeof this.altFormat === 'function' ? this.altFormat(this.startDate) : this.startDate.toFormat(this.altFormat));
2503
+ } else {
2504
+ if (this.altInput.every(x => $(x).is('input'))) {
2505
+ $(this.altInput[0]).val(typeof this.altFormat === 'function' ? this.altFormat(this.startDate) : this.startDate.toFormat(this.altFormat));
2506
+ if (this.endDate) {
2507
+ $(this.altInput[1]).val(typeof this.altFormat === 'function' ? this.altFormat(this.endDate) : this.endDate.toFormat(this.altFormat));
2508
+ } else {
2509
+ $(this.altInput[1]).val(null);
2510
+ }
2511
+ }
2512
+ }
2513
+ }
2514
+
2479
2515
  },
2480
2516
 
2481
2517
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "daterangepicker-4.x",
3
- "version": "4.7.0",
3
+ "version": "4.8.2",
4
4
  "description": "Date range picker with time component and pre-defined ranges",
5
5
  "main": "daterangepicker.js",
6
6
  "style": "daterangepicker.css",