@wernfried/daterangepicker 4.17.1 → 4.17.2

package/API_Doc.md

@@ -31,10 +31,6 @@ Useful to remove any manually added elements.</p>
 <dt><a href="#event_hide.daterangepicker">"hide.daterangepicker" (this)</a></dt>
 <dd><p>Emitted when the picker is hidden</p>
 </dd>
-<dt><a href="#event_outsideClick.daterangepicker">"outsideClick.daterangepicker" (this)</a></dt>
-<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>
-</dd>
 <dt><a href="#event_showCalendar.daterangepicker">"showCalendar.daterangepicker" (this)</a></dt>
 <dd><p>Emitted when the calendar(s) are shown.
 Only useful when <a href="#Ranges">Ranges</a> are used.</p>
@@ -43,19 +39,23 @@ Only useful when <a href="#Ranges">Ranges</a> are used.</p>
 <dd><p>Emitted when the calendar(s) are hidden.
 Only useful when <a href="#Ranges">Ranges</a> are used.</p>
 </dd>
+<dt><a href="#event_outsideClick.daterangepicker">"outsideClick.daterangepicker" (this)</a></dt>
+<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>
+</dd>
 <dt><a href="#event_dateChange.daterangepicker">"dateChange.daterangepicker" (this, side)</a></dt>
 <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>
 </dd>
+<dt><a href="#event_timeChange.daterangepicker">"timeChange.daterangepicker" (this, side)</a></dt>
+<dd><p>Emitted when the time changed. Does not trigger when date is changed</p>
+</dd>
 <dt><a href="#event_apply.daterangepicker">"apply.daterangepicker" (this)</a></dt>
 <dd><p>Emitted when the <code>Apply</code> button is clicked, or when a predefined <a href="#Ranges">Ranges</a> is clicked</p>
 </dd>
 <dt><a href="#event_cancel.daterangepicker">"cancel.daterangepicker" (this)</a></dt>
 <dd><p>Emitted when the <code>Cancel</code> button is clicked</p>
 </dd>
-<dt><a href="#event_timeChange.daterangepicker">"timeChange.daterangepicker" (this, side)</a></dt>
-<dd><p>Emitted when the time changed. Does not trigger when date is changed</p>
-</dd>
 <dt><a href="#event_inputChanged.daterangepicker">"inputChanged.daterangepicker" (this)</a></dt>
 <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>
 </dd>
@@ -431,11 +431,11 @@ Emitted when the picker is hidden
 | --- | --- | --- |
 | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
 
-<a name="event_outsideClick.daterangepicker"></a>
+<a name="event_showCalendar.daterangepicker"></a>
 
-## "outsideClick.daterangepicker" (this)
-Emitted when user clicks outside the picker. 
-Use option `onOutsideClick` to define the default action, then you may not need to handle this event.
+## "showCalendar.daterangepicker" (this)
+Emitted when the calendar(s) are shown.
+Only useful when [Ranges](#Ranges) are used.
 
 **Kind**: event emitted  
 
@@ -443,10 +443,10 @@ Use option `onOutsideClick` to define the default action, then you may not need
 | --- | --- | --- |
 | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
 
-<a name="event_showCalendar.daterangepicker"></a>
+<a name="event_hideCalendar.daterangepicker"></a>
 
-## "showCalendar.daterangepicker" (this)
-Emitted when the calendar(s) are shown.
+## "hideCalendar.daterangepicker" (this)
+Emitted when the calendar(s) are hidden.
 Only useful when [Ranges](#Ranges) are used.
 
 **Kind**: event emitted  
@@ -455,11 +455,11 @@ Only useful when [Ranges](#Ranges) are used.
 | --- | --- | --- |
 | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
 
-<a name="event_hideCalendar.daterangepicker"></a>
+<a name="event_outsideClick.daterangepicker"></a>
 
-## "hideCalendar.daterangepicker" (this)
-Emitted when the calendar(s) are hidden.
-Only useful when [Ranges](#Ranges) are used.
+## "outsideClick.daterangepicker" (this)
+Emitted when user clicks outside the picker. 
+Use option `onOutsideClick` to define the default action, then you may not need to handle this event.
 
 **Kind**: event emitted  
 
@@ -480,21 +480,22 @@ use ["timeChange.daterangepicker"](#event_timeChange.daterangepicker) to handle
 | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
 | side | <code>string</code> | Either `'start'` or `'end'` indicating whether startDate or endDate was changed. `null` when `singleDatePicker: true` |
 
-<a name="event_apply.daterangepicker"></a>
+<a name="event_timeChange.daterangepicker"></a>
 
-## "apply.daterangepicker" (this)
-Emitted when the `Apply` button is clicked, or when a predefined [Ranges](#Ranges) is clicked
+## "timeChange.daterangepicker" (this, side)
+Emitted when the time changed. Does not trigger when date is changed
 
 **Kind**: event emitted  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
+| side | <code>string</code> | Either `'start'` or `'end'` indicating whether startDate or endDate was changed |
 
-<a name="event_cancel.daterangepicker"></a>
+<a name="event_apply.daterangepicker"></a>
 
-## "cancel.daterangepicker" (this)
-Emitted when the `Cancel` button is clicked
+## "apply.daterangepicker" (this)
+Emitted when the `Apply` button is clicked, or when a predefined [Ranges](#Ranges) is clicked
 
 **Kind**: event emitted  
 
@@ -502,17 +503,16 @@ Emitted when the `Cancel` button is clicked
 | --- | --- | --- |
 | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
 
-<a name="event_timeChange.daterangepicker"></a>
+<a name="event_cancel.daterangepicker"></a>
 
-## "timeChange.daterangepicker" (this, side)
-Emitted when the time changed. Does not trigger when date is changed
+## "cancel.daterangepicker" (this)
+Emitted when the `Cancel` button is clicked
 
 **Kind**: event emitted  
 
 | Param | Type | Description |
 | --- | --- | --- |
 | this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
-| side | <code>string</code> | Either `'start'` or `'end'` indicating whether startDate or endDate was changed |
 
 <a name="event_inputChanged.daterangepicker"></a>
 

package/README.md

@@ -20,8 +20,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/@wernfried/daterangepicker@4.17.1/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.17.1/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.17.2/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.17.2/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -43,11 +43,11 @@ Above samples are based on the [original repository](https://github.com/dangross
    "imports": {
       "jquery": "https://cdn.jsdelivr.net/npm/jquery@4.0.0/+esm",
       "luxon": "https://cdn.jsdelivr.net/npm/luxon@3.7.2/+esm",
-      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.17.1/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.17.2/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.17.1/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.17.2/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -68,7 +68,7 @@ Above samples are based on the [original repository](https://github.com/dangross
 ```html
 <script ...></script>
 <link type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" rel="stylesheet" />
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.17.1/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@4.17.2/css/daterangepicker.bulma.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 

package/dist/esm/daterangepicker.js

@@ -336,29 +336,16 @@ class DateRangePicker {
         }
       }
     }
-    if (!this.timePicker) {
-      if (this.minDate)
-        this.minDate = this.minDate.startOf("day");
-      if (this.maxDate)
-        this.maxDate = this.maxDate.endOf("day");
-    }
     if (this.singleDatePicker) {
       this.#endDate = this.#startDate;
     } else if (this.#endDate < this.#startDate) {
       console.error(`Option 'endDate' ${this.#endDate} must not be earlier than 'startDate' ${this.#startDate}`);
     }
-    if (["function", "string"].includes(typeof options.altFormat))
-      this.altFormat = options.altFormat;
-    if (typeof options.altInput === "string" || Array.isArray(options.altInput)) {
-      if (this.singleDatePicker && typeof options.altInput === "string") {
-        this.altInput = $(options.altInput).is("input:text") ? options.altInput : null;
-      } else if (!this.singleDatePicker && Array.isArray(options.altInput) && options.altInput.length === 2) {
-        this.altInput = options.altInput.every((x) => typeof x === "string" && $(x).is("input:text")) ? options.altInput : null;
-      } else {
-        const note = `Value of "altInput" must be ` + (this.singleDatePicker ? "a string" : "an array of two string elements");
-        console.error(`Option 'altInput' ${JSON.stringify(options.altInput)} is not valid
-`, note);
-      }
+    if (!this.timePicker) {
+      if (this.minDate) this.minDate = this.minDate.startOf("day");
+      if (this.maxDate) this.maxDate = this.maxDate.endOf("day");
+      this.#startDate = this.#startDate.startOf("day");
+      this.#endDate = this.#endDate.endOf("day");
     }
     if (options.warnings !== void 0)
       console.warn(`Option 'warnings' not used anymore. Listen to event 'violated.daterangepicker'`);
@@ -375,6 +362,8 @@ class DateRangePicker {
             console.error(`Value of startDate "${this.#startDate}" violates ${vio.find((x) => x.reason.startsWith("isInvalid")).reason}`);
           } else {
             const newDate = vio.filter((x) => x.new != null).at(-1).new;
+            if (process.env.JEST_WORKER_ID == null)
+              console.warn(`Correcting startDate from ${this.#startDate} to ${newDate}`);
             this.#startDate = newDate;
           }
         }
@@ -385,12 +374,27 @@ class DateRangePicker {
               console.error(`Value of endDate "${this.#endDate}" violates ${vio.find((x) => x.reason.startsWith("isInvalid")).reason}`);
             } else {
               const newDate = vio.filter((x) => x.new != null).at(-1).new;
+              if (process.env.JEST_WORKER_ID == null)
+                console.warn(`Correcting endDate from ${this.#endDate} to ${newDate}`);
               this.#endDate = newDate;
             }
           }
         }
       }
     }
+    if (["function", "string"].includes(typeof options.altFormat))
+      this.altFormat = options.altFormat;
+    if (typeof options.altInput === "string" || Array.isArray(options.altInput)) {
+      if (this.singleDatePicker && typeof options.altInput === "string") {
+        this.altInput = $(options.altInput).is("input:text") ? options.altInput : null;
+      } else if (!this.singleDatePicker && Array.isArray(options.altInput) && options.altInput.length === 2) {
+        this.altInput = options.altInput.every((x) => typeof x === "string" && $(x).is("input:text")) ? options.altInput : null;
+      } else {
+        const note = `Value of "altInput" must be ` + (this.singleDatePicker ? "a string" : "an array of two string elements");
+        console.error(`Option 'altInput' ${JSON.stringify(options.altInput)} is not valid
+`, note);
+      }
+    }
     if (typeof options.opens === "string") {
       if (["left", "right", "center"].includes(options.opens))
         this.opens = options.opens;
@@ -467,10 +471,6 @@ class DateRangePicker {
     if (typeof cb === "function")
       this.callback = cb;
     if (!this.timePicker) {
-      if (this.#startDate)
-        this.#startDate = this.#startDate.startOf("day");
-      if (this.#endDate)
-        this.#endDate = this.#endDate.endOf("day");
       this.container.find(".calendar-time").hide();
     }
     if (this.timePicker && this.autoApply)
@@ -532,6 +532,7 @@ class DateRangePicker {
   set endDate(val) {
     this.#endDate = val;
   }
+  /* #region Set startDate/endDate */
   /**
   * Sets the date range picker's currently selected start date to the provided date.<br>
   * `startDate` must be a `luxon.DateTime` or `Date` or `string` according to {@link ISO-8601} or a string matching `locale.format`.<br>
@@ -650,6 +651,7 @@ class DateRangePicker {
       }
     }
   }
+  /* #endregion */
   logDate(date) {
     return this.timePicker ? date.toISO({ suppressMilliseconds: true }) : date.toISODate();
   }
@@ -927,6 +929,7 @@ class DateRangePicker {
       return result;
     }
   }
+  /* #region Rendering */
   /**
   * Updates the picker when calendar is initiated or any date has been selected. 
   * Could be useful after running {@link #DateRangePicker+setStartDate|setStartDate} or {@link #DateRangePicker+setEndDate|setRange} 
@@ -1369,6 +1372,8 @@ class DateRangePicker {
       this.container.find("button.applyBtn").prop("disabled", true);
     }
   }
+  /* #endregion */
+  /* #region Move/Show/Hide */
   /**
   * Place the picker at the right place in the document
   * @private
@@ -1512,25 +1517,6 @@ class DateRangePicker {
     }
   }
   /**
-  * Closes the picker when user clicks outside
-  * @param {external:jQuery} e - The Event target
-  * @emits "outsideClick.daterangepicker"
-  * @private
-  */
-  outsideClick(e) {
-    var target = $(e.target);
-    if (
-      // ie modal dialog fix
-      e.type === "focusin" || target.closest(this.element).length || target.closest(this.container).length || target.closest(".calendar-table").length
-    ) return;
-    if (this.onOutsideClick === "cancel") {
-      this.#startDate = this.oldStartDate;
-      this.#endDate = this.oldEndDate;
-    }
-    this.hide();
-    this.element.trigger("outsideClick.daterangepicker", this);
-  }
-  /**
   * Shows calendar when user selects "Custom Ranges"
   * @emits "showCalendar.daterangepicker"
   */
@@ -1547,30 +1533,26 @@ class DateRangePicker {
     this.container.removeClass("show-calendar");
     this.element.trigger("hideCalendar.daterangepicker", this);
   }
+  /* #endregion */
+  /* #region Handle mouse related events */
   /**
-  * Set date values after user selected a date
+  * Closes the picker when user clicks outside
   * @param {external:jQuery} e - The Event target
+  * @emits "outsideClick.daterangepicker"
   * @private
   */
-  clickRange(e) {
-    var label = e.target.getAttribute("data-range-key");
-    this.chosenLabel = label;
-    if (label == this.locale.customRangeLabel) {
-      this.showCalendars();
-    } else {
-      var dates = this.ranges[label];
-      this.#startDate = dates[0];
-      this.#endDate = dates[1];
-      if (!this.timePicker) {
-        this.#startDate.startOf("day");
-        this.#endDate.endOf("day");
-      }
-      if (!this.alwaysShowCalendars)
-        this.hideCalendars();
-      if (this.element.triggerHandler("beforeHide.daterangepicker", this))
-        this.updateView();
-      this.clickApply();
+  outsideClick(e) {
+    var target = $(e.target);
+    if (
+      // ie modal dialog fix
+      e.type === "focusin" || target.closest(this.element).length || target.closest(this.container).length || target.closest(".calendar-table").length
+    ) return;
+    if (this.onOutsideClick === "cancel") {
+      this.#startDate = this.oldStartDate;
+      this.#endDate = this.oldEndDate;
     }
+    this.hide();
+    this.element.trigger("outsideClick.daterangepicker", this);
   }
   /**
   * Move calendar to previous month
@@ -1694,6 +1676,33 @@ class DateRangePicker {
       $(el).removeClass("range-hover");
     });
   }
+  /* #endregion */
+  /* #region Select values by Mouse  */
+  /**
+  * Set date values after user selected a date
+  * @param {external:jQuery} e - The Event target
+  * @private
+  */
+  clickRange(e) {
+    var label = e.target.getAttribute("data-range-key");
+    this.chosenLabel = label;
+    if (label == this.locale.customRangeLabel) {
+      this.showCalendars();
+    } else {
+      var dates = this.ranges[label];
+      this.#startDate = dates[0];
+      this.#endDate = dates[1];
+      if (!this.timePicker) {
+        this.#startDate.startOf("day");
+        this.#endDate.endOf("day");
+      }
+      if (!this.alwaysShowCalendars)
+        this.hideCalendars();
+      if (this.element.triggerHandler("beforeHide.daterangepicker", this))
+        this.updateView();
+      this.clickApply();
+    }
+  }
   /**
   * User clicked a date
   * @param {external:jQuery} e - The Event target
@@ -1808,64 +1817,6 @@ class DateRangePicker {
     }
   }
   /**
-  * User clicked `Apply` button
-  * @emits "apply.daterangepicker"
-  * @private
-  */
-  clickApply() {
-    this.hide();
-    this.element.trigger("apply.daterangepicker", this);
-  }
-  /**
-  * User clicked `Cancel` button
-  * @emits "cancel.daterangepicker"
-  * @private
-  */
-  clickCancel() {
-    this.#startDate = this.oldStartDate;
-    this.#endDate = this.oldEndDate;
-    this.hide();
-    this.element.trigger("cancel.daterangepicker", this);
-  }
-  /**
-  * Calender month moved
-  * @param {external:jQuery} e - The Event target
-  * @private
-  */
-  monthOrYearChanged(e) {
-    var isLeft = $(e.target).closest(".drp-calendar").hasClass("left"), leftOrRight = isLeft ? "left" : "right", cal = this.container.find(".drp-calendar." + leftOrRight);
-    var month = parseInt(cal.find(".monthselect").val(), 10);
-    var year = cal.find(".yearselect").val();
-    if (!isLeft) {
-      if (year < this.#startDate.year || year == this.#startDate.year && month < this.#startDate.month) {
-        month = this.#startDate.month;
-        year = this.#startDate.year;
-      }
-    }
-    if (this.minDate) {
-      if (year < this.minDate.year || year == this.minDate.year && month < this.minDate.month) {
-        month = this.minDate.month;
-        year = this.minDate.year;
-      }
-    }
-    if (this.maxDate) {
-      if (year > this.maxDate.year || year == this.maxDate.year && month > this.maxDate.month) {
-        month = this.maxDate.month;
-        year = this.maxDate.year;
-      }
-    }
-    if (isLeft) {
-      this.leftCalendar.month = this.leftCalendar.month.set({ year, month });
-      if (this.linkedCalendars)
-        this.rightCalendar.month = this.leftCalendar.month.plus({ month: 1 });
-    } else {
-      this.rightCalendar.month = this.rightCalendar.month.set({ year, month });
-      if (this.linkedCalendars)
-        this.leftCalendar.month = this.rightCalendar.month.minus({ month: 1 });
-    }
-    this.updateCalendars();
-  }
-  /**
   * User clicked a time
   * @param {external:jQuery} e - The Event target
   * @emits "timeChange.daterangepicker"
@@ -1924,6 +1875,65 @@ class DateRangePicker {
     this.element.trigger("timeChange.daterangepicker", [this, this.singleDatePicker ? null : side]);
   }
   /**
+  * Calender month moved
+  * @param {external:jQuery} e - The Event target
+  * @private
+  */
+  monthOrYearChanged(e) {
+    var isLeft = $(e.target).closest(".drp-calendar").hasClass("left"), leftOrRight = isLeft ? "left" : "right", cal = this.container.find(".drp-calendar." + leftOrRight);
+    var month = parseInt(cal.find(".monthselect").val(), 10);
+    var year = cal.find(".yearselect").val();
+    if (!isLeft) {
+      if (year < this.#startDate.year || year == this.#startDate.year && month < this.#startDate.month) {
+        month = this.#startDate.month;
+        year = this.#startDate.year;
+      }
+    }
+    if (this.minDate) {
+      if (year < this.minDate.year || year == this.minDate.year && month < this.minDate.month) {
+        month = this.minDate.month;
+        year = this.minDate.year;
+      }
+    }
+    if (this.maxDate) {
+      if (year > this.maxDate.year || year == this.maxDate.year && month > this.maxDate.month) {
+        month = this.maxDate.month;
+        year = this.maxDate.year;
+      }
+    }
+    if (isLeft) {
+      this.leftCalendar.month = this.leftCalendar.month.set({ year, month });
+      if (this.linkedCalendars)
+        this.rightCalendar.month = this.leftCalendar.month.plus({ month: 1 });
+    } else {
+      this.rightCalendar.month = this.rightCalendar.month.set({ year, month });
+      if (this.linkedCalendars)
+        this.leftCalendar.month = this.rightCalendar.month.minus({ month: 1 });
+    }
+    this.updateCalendars();
+  }
+  /**
+  * User clicked `Apply` button
+  * @emits "apply.daterangepicker"
+  * @private
+     */
+  clickApply() {
+    this.hide();
+    this.element.trigger("apply.daterangepicker", this);
+  }
+  /**
+  * User clicked `Cancel` button
+  * @emits "cancel.daterangepicker"
+  * @private
+  */
+  clickCancel() {
+    this.#startDate = this.oldStartDate;
+    this.#endDate = this.oldEndDate;
+    this.hide();
+    this.element.trigger("cancel.daterangepicker", this);
+  }
+  /* #endregion */
+  /**
   * Update the picker with value from `<input>` element.<br> 
   * Input values must be given in format of `locale.format`. Invalid values are handles by `violated.daterangepicker` Event
   * @emits "inputChanged.daterangepicker"