daterangepicker-4.x 4.2.3 → 4.2.4

package/README.md

@@ -18,8 +18,8 @@ Above samples are based on the [original repository](https://github.com/dangross
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.2.3/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.2.3/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.2.4/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.2.4/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="daterange" />
 
@@ -114,6 +114,7 @@ Available methods are listed below in [API documentation](#DateRangePicker). You
    * [.setStartDate(startDate)](#DateRangePicker+setStartDate)
    * [.setEndDate(endDate)](#DateRangePicker+setEndDate)
    * [.setPeriod(startDate, endDate)](#DateRangePicker+setPeriod)
+   * `$(...).data('daterangepicker')` to get the daterangepicker object
 
 all other methods are used rarely.
 
@@ -494,7 +495,7 @@ Options for DateRangePicker
 | 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`. |
 | 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` |
 | 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` |
-| 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`. <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` |
+| 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` |
 | 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` |
 | 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. |
 | showDropdowns | <code>boolean</code> | <code>false</code> | Show year and month select boxes above calendars to jump to a specific month and year |
@@ -511,7 +512,7 @@ Options for DateRangePicker
 | 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. |
 | 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 |
 | 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). |
-| 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: `isInvalidDate(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/> |
+| 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/> |
 | 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)` |
 | applyButtonClasses | <code>string</code> | <code>&quot;btn-primary&quot;</code> | CSS class names that will be added only to the apply button |
 | cancelButtonClasses | <code>string</code> | <code>&quot;btn-default&quot;</code> | CSS class names that will be added only to the cancel button |

package/daterangepicker.js

@@ -61,7 +61,7 @@
         * Must be a `luxon.Duration` or number of seconds or a string according to {@link ISO-8601} duration.<br/>
         * Ignored when `singleDatePicker: true`
         * @property {external:DateTime|external:Date|string|null} initalMonth - Default: `DateTime.now().startOf('month')`<br/>
-        * The inital month shown when `startDate: null`. <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 {@link ISO-8601} or a string matching `locale.format`.<br/>
         * When `initalMonth` is used, then `endDate` is ignored and it works only with `timePicker: false`
 
@@ -100,7 +100,7 @@
         * Function has no effect on date values set by `startDate`, `endDate`, `ranges`, {@link #DateRangePicker+setStartDate|setStartDate}, {@link #DateRangePicker+setEndDate|setEndDate}.
         * @property {function} isInvalidTime=false - 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: `isInvalidDate(time, side, unit)`<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/>
@@ -435,16 +435,47 @@
             if (this.maxDate)
                 this.maxDate = this.maxDate.endOf('day');
         }
+
+        //if no start/end dates set, check if the input element contains initial values
+        if (typeof options.startDate === 'undefined' && typeof options.endDate === 'undefined') {
+            if ($(this.element).is(':text')) {
+                let start, end;
+                const val = $(this.element).val();
+                if (val != '') {
+                    const split = val.split(this.locale.separator);
+                    const format = typeof this.locale.format === 'string' ? this.locale.format : DateTime.parseFormatForOpts(this.locale.format);
+                    if (split.length == 2) {
+                        start = DateTime.fromFormat(split[0], format, { locale: DateTime.now().locale });
+                        end = DateTime.fromFormat(split[1], format, { locale: DateTime.now().locale });
+                    } else if (this.singleDatePicker) {
+                        start = DateTime.fromFormat(val, format, { locale: DateTime.now().locale });
+                        end = DateTime.fromFormat(val, format, { locale: DateTime.now().locale });
+                    }
+
+                    if (start.isValid && end.isValid) {
+                        this.setStartDate(start, false);
+                        this.setEndDate(end, false);
+                    } else {
+                        console.error(`Value in <input> is not a valid string`);
+                    }
+                }
+            }
+        }
+
         if (this.singleDatePicker) {
             this.endDate = this.startDate;
         } else if (this.endDate < this.startDate) {
             this.endDate = this.startDate;
+            console.warn(`Set endDate to ${this.timePicker ? endDate.toISO({ suppressMilliseconds: true }) : endDate.toISODate()}  because it was earlier than startDate`);
         }
-        if (!this.startDate && this.initalMonth)
-            this.endDate = null;
 
-        // Do some sanity checks on startDate for minDate, maxDate
-        this.constrainDate();
+        if (!this.startDate && this.initalMonth) {
+            // No initial date selected
+            this.endDate = null;
+        } else {
+            // Do some sanity checks on startDate for minDate, maxDate
+            this.constrainDate();
+        }
 
         if (typeof options.applyButtonClasses === 'string')
             this.applyButtonClasses = options.applyButtonClasses;
@@ -533,29 +564,6 @@
             }
         }
 
-        //if no start/end dates set, check if the input element contains initial values
-        if (typeof options.startDate === 'undefined' && typeof options.endDate === 'undefined') {
-            if ($(this.element).is(':text')) {
-                let start, end;
-                const val = $(this.element).val();
-                const split = val.split(this.locale.separator);
-
-                const format = typeof this.locale.format === 'string' ? this.locale.format : DateTime.parseFormatForOpts(this.locale.format);
-                if (split.length == 2) {
-                    start = DateTime.fromFormat(split[0], format, { locale: DateTime.now().locale });
-                    end = DateTime.fromFormat(split[1], format, { locale: DateTime.now().locale });
-                } else if (this.singleDatePicker && val !== "") {
-                    start = DateTime.fromFormat(val, format, { locale: DateTime.now().locale });
-                    end = DateTime.fromFormat(val, format, { locale: DateTime.now().locale });
-                }
-
-                if (start.isValid && end.isValid) {
-                    this.setStartDate(start, false);
-                    this.setEndDate(end, false);
-                }
-            }
-        }
-
         if (!this.singleDatePicker && typeof options.ranges === 'object') {
             // Process custom ranges
             for (let range in options.ranges) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daterangepicker-4.x",
-  "version": "4.2.3",
+  "version": "4.2.4",
   "description": "Date range picker with time component and pre-defined ranges",
   "main": "daterangepicker.js",
   "style": "daterangepicker.css",