@wernfried/daterangepicker 5.1.5 → 5.1.8

package/API_Doc.md

@@ -27,11 +27,11 @@
 <code>minDate</code>, <code>maxDate</code>, <code>minSpan</code>, <code>maxSpan</code>, <code>invalidDate</code> and <code>invalidTime</code> constraints.<br>
 Event is only triggered when date string is valid and date value is changing<br></p>
 </dd>
-<dt><a href="#event_beforeRenderCalendar">"beforeRenderCalendar"</a></dt>
+<dt><a href="#event_beforeRenderTimePicker">"beforeRenderTimePicker"</a></dt>
 <dd><p>Emitted before the calendar time picker is rendered.</p>
 </dd>
 <dt><a href="#event_beforeRenderCalendar">"beforeRenderCalendar"</a></dt>
-<dd><p>Emitted before the calendar is rendered. Useful to remove any manually added elements.</p>
+<dd><p>Emitted before the calendar is rendered.</p>
 </dd>
 <dt><a href="#event_show">"show"</a></dt>
 <dd><p>Emitted when the picker is shown</p>
@@ -70,10 +70,6 @@ Only useful when <a href="#Ranges">Ranges</a> are used.</p>
 <dt><a href="#event_monthViewChange">"monthViewChange"</a></dt>
 <dd><p>Emitted after month view changed, for example by click on &#39;prev&#39; or &#39;next&#39;</p>
 </dd>
-<dt><a href="#event_beforeRenderTimePicker">"beforeRenderTimePicker" (this)</a></dt>
-<dd><p>Emitted before the TimePicker is rendered.
-Useful to remove any manually added elements.</p>
-</dd>
 </dl>
 
 ## Typedefs
@@ -112,6 +108,7 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
     * [.formatDate(date, format)](#DateRangePicker+formatDate) ⇒ <code>string</code>
     * [.validateInput(range, dipatch)](#DateRangePicker+validateInput) ⇒ <code>InputViolation</code> \| <code>null</code>
     * [.updateView(monthChange)](#DateRangePicker+updateView)
+    * [.move()](#DateRangePicker+move)
     * [.show()](#DateRangePicker+show)
     * [.hide()](#DateRangePicker+hide)
     * [.toggle()](#DateRangePicker+toggle)
@@ -120,7 +117,7 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
     * [.updateElement()](#DateRangePicker+updateElement)
     * [.updateAltInput()](#DateRangePicker+updateAltInput)
     * [.remove()](#DateRangePicker+remove)
-    * [.addListener(element, eventName, selector, delegate)](#DateRangePicker+addListener)
+    * [.triggerEvent(ev, ...args)](#DateRangePicker+triggerEvent)
 
 <a name="new_DateRangePicker_new"></a>
 
@@ -291,6 +288,12 @@ Could be useful after running [setStartDate](#DateRangePicker+setStartDate) or [
 | --- | --- | --- |
 | monthChange | <code>boolean</code> | If `true` then monthView changed |
 
+<a name="DateRangePicker+move"></a>
+
+### dateRangePicker.move()
+Place the picker at the right place in the document
+
+**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
 <a name="DateRangePicker+show"></a>
 
 ### dateRangePicker.show()
@@ -344,19 +347,17 @@ Update altInput `<input>` element with selected value
 Removes the picker from document
 
 **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
-<a name="DateRangePicker+addListener"></a>
+<a name="DateRangePicker+triggerEvent"></a>
 
-### dateRangePicker.addListener(element, eventName, selector, delegate)
-Helper function to add eventListener similar to jQuery .on( events [, selector ] [, data ] )
+### dateRangePicker.triggerEvent(ev, ...args)
+Helper function to dispatch events
 
 **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| element | <code>string</code> | Query selector of element where listener is added |
-| eventName | <code>string</code> | Name of the event |
-| selector | <code>string</code> | Query selector string to filter the descendants of the element |
-| delegate | <code>any</code> | Handler data |
+| ev | <code>Event</code> | From this.#events |
+| ...args | <code>any</code> | Additional parameters if needed |
 
 <a name="DateRangePickerEvent"></a>
 
@@ -434,9 +435,9 @@ drp.setStartDate(DateTime.now().minus({ years: 10 });
 
 // -> Calendar selects and shows "today - 3 days"
 ```
-<a name="event_beforeRenderCalendar"></a>
+<a name="event_beforeRenderTimePicker"></a>
 
-## "beforeRenderCalendar"
+## "beforeRenderTimePicker"
 Emitted before the calendar time picker is rendered.
 
 **Kind**: event emitted  
@@ -450,7 +451,7 @@ Emitted before the calendar time picker is rendered.
 <a name="event_beforeRenderCalendar"></a>
 
 ## "beforeRenderCalendar"
-Emitted before the calendar is rendered. Useful to remove any manually added elements.
+Emitted before the calendar is rendered.
 
 **Kind**: event emitted  
 **Properties**
@@ -622,18 +623,6 @@ Emitted after month view changed, for example by click on 'prev' or 'next'
 | event.left | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | The first day of month in left-hand calendar |
 | event.right | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | The first day of month in left-hand calendar or `null` for singleDatePicker |
 
-<a name="event_beforeRenderTimePicker"></a>
-
-## "beforeRenderTimePicker" (this)
-Emitted before the TimePicker is rendered.
-Useful to remove any manually added elements.
-
-**Kind**: event emitted  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
-
 <a name="Options"></a>
 
 ## Options

package/README.md

@@ -19,8 +19,8 @@ Above samples are based on the [original repository](https://github.com/dangross
 #### Global import with `<script>` tags
 ```html
 <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@5.1.5/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.5/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.8/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.8/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -40,11 +40,11 @@ Above samples are based on the [original repository](https://github.com/dangross
 {
    "imports": {
       "luxon": "https://cdn.jsdelivr.net/npm/luxon@3.7.2/+esm",
-      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.5/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.8/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.5/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.8/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -63,9 +63,9 @@ Above samples are based on the [original repository](https://github.com/dangross
 #### Style with Bulma
 ```html
 <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@5.1.5/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.8/dist/global/daterangepicker.min.js"></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@5.1.5/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.8/css/daterangepicker.bulma.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -121,8 +121,8 @@ Initialisation with jQuery is supported in version 5.x
 ```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@5.1.5/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.5/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.8/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.8/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -188,7 +188,7 @@ input.addEventListener('beforeHide', (ev) => {
 ### Option `ranges`
 <a name="options-ranges"></a>
 ```js
-range: {
+ranges: {
    'Today': [DateTime.now().startOf('day'), DateTime.now().endOf('day')],
    'Yesterday': [DateTime.now().startOf('day').minus({day: 1}), DateTime.now().endOf('day').minus({day: 1})],
    'Last 7 Days': ['2025-03-01', '2025-03-07'],

package/dist/esm/daterangepicker.js

@@ -601,13 +601,13 @@ class DateRangePicker {
     /**
     * Emitted before the calendar time picker is rendered.
     * @event
-    * @name "beforeRenderCalendar"
+    * @name "beforeRenderTimePicker"
     * @property {DateRangePickerEvent} event - The Event object
     * @property {DateRangePicker} event.picker - The daterangepicker object
     */
     onBeforeRenderTimePicker: { type: "beforeRenderTimePicker" },
     /**
-    * Emitted before the calendar is rendered. Useful to remove any manually added elements.
+    * Emitted before the calendar is rendered.
     * @event
     * @name "beforeRenderCalendar"
     * @property {DateRangePickerEvent} event - The Event object
@@ -868,9 +868,6 @@ class DateRangePicker {
     }
   }
   /* #endregion */
-  logDate(date) {
-    return this.timePicker ? date.toISO({ suppressMilliseconds: true }) : date.toISODate();
-  }
   /**
    * Format a DateTime object
    * @param {external:DateTime} date - The DateTime to format
@@ -1361,13 +1358,6 @@ class DateRangePicker {
     this.container.querySelector(`.drp-calendar.${side} .calendar-table tbody`).innerHTML = html;
   }
   /**
-  * Emitted before the TimePicker is rendered.
-  * Useful to remove any manually added elements.
-  * @event
-  * @name "beforeRenderTimePicker"
-  * @param {DateRangePicker} this - The daterangepicker object
-  */
-  /**
   * Renders the time pickers
   * @private
   * @emits "beforeRenderTimePicker"
@@ -1556,7 +1546,6 @@ class DateRangePicker {
   /* #region Move/Show/Hide */
   /**
   * Place the picker at the right place in the document
-  * @private
   */
   move() {
     let parentOffset = { top: 0, left: 0 };
@@ -1953,31 +1942,29 @@ class DateRangePicker {
   calculateChosenLabel() {
     if (Object.keys(this.ranges).length === 0)
       return;
-    var customRange = true;
-    var i = 0;
-    for (var range in this.ranges) {
-      var unit = this.timePicker ? "hour" : "day";
-      if (this.timePicker) {
-        if (this.timePickerOpts.showMinutes) {
-          unit = "minute";
-        } else if (this.timePickerOpts.showSeconds) {
-          unit = "second";
-        }
+    let customRange = true;
+    let unit = this.timePicker ? "hour" : "day";
+    if (this.timePicker) {
+      if (this.timePickerOpts.showMinutes) {
+        unit = "minute";
+      } else if (this.timePickerOpts.showSeconds) {
+        unit = "second";
       }
-      if (this.#startDate.startOf(unit).equals(this.ranges[range][0].startOf(unit)) && this.#endDate.startOf(unit).equals(this.ranges[range][1].startOf(unit))) {
+    }
+    for (const [key2, [start, end]] of Object.entries(this.ranges)) {
+      if (this.#startDate.startOf(unit).equals(start.startOf(unit)) && this.#endDate.startOf(unit).equals(end.startOf(unit))) {
         customRange = false;
-        const range2 = this.container.querySelector(`.ranges li:eq(${i})`);
-        this.chosenLabel = range2.dataset.rangeKey;
-        range2.classList.add("active");
+        const range = this.container.querySelector(`.ranges li[data-range-key="${key2}"]`);
+        this.chosenLabel = key2;
+        range.classList.add("active");
         break;
       }
-      i++;
     }
     if (customRange) {
       if (this.showCustomRangeLabel) {
-        const range2 = this.container.querySelector(".ranges li:last-child");
-        this.chosenLabel = range2.dataset.rangeKey;
-        range2.classList.add("active");
+        const range = this.container.querySelector(".ranges li:last-child");
+        this.chosenLabel = range.dataset.rangeKey;
+        range.classList.add("active");
       } else {
         this.chosenLabel = null;
       }
@@ -2249,7 +2236,6 @@ class DateRangePicker {
    * Helper function to dispatch events
    * @param {Event} ev - From this.#events
    * @param  {...any?} args - Additional parameters if needed
-   * @private
    */
   triggerEvent(ev, ...args) {
     if (args.length === 0) {
@@ -2268,6 +2254,7 @@ class DateRangePicker {
    * @param {string} eventName - Name of the event
    * @param {string} selector - Query selector string to filter the descendants of the element
    * @param {any} delegate - Handler data
+   * @private
    */
   addListener(element, eventName, selector, delegate) {
     this.container.querySelectorAll(element).forEach((el) => {