@wernfried/daterangepicker 5.1.4 → 5.1.6

package/API_Doc.md

@@ -552,7 +552,7 @@ Emitted when the date changed. Does not trigger when time is changed, use ["time
 | --- | --- | --- |
 | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
 | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
-| side | <code>string</code> | Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker |
+| event.side | <code>string</code> | Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker |
 
 <a name="event_timeChange"></a>
 
@@ -566,7 +566,7 @@ Emitted when the time changed. Does not trigger when date is changed
 | --- | --- | --- |
 | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
 | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
-| side | <code>string</code> | Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker |
+| event.side | <code>string</code> | Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker |
 
 <a name="event_apply"></a>
 
@@ -619,8 +619,8 @@ Emitted after month view changed, for example by click on 'prev' or 'next'
 | --- | --- | --- |
 | event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
 | event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
-| left | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | The first day of month in left-hand calendar |
-| 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 |
+| 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>
 

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.4/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.4/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/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.4/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.4/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/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.4/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/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.4/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/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.4/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.4/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/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

@@ -670,7 +670,7 @@ class DateRangePicker {
     * @name "dateChange"
     * @property {DateRangePickerEvent} event - The Event object
     * @property {DateRangePicker} event.picker - The daterangepicker object
-    * @property {string} side - Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker
+    * @property {string} event.side - Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker
     */
     onDateChange: { type: "dateChange", param: (side) => {
       return side;
@@ -681,7 +681,7 @@ class DateRangePicker {
     * @name "timeChange"
     * @property {DateRangePickerEvent} event - The Event object
     * @property {DateRangePicker} event.picker - The daterangepicker object
-    * @property {string} side - Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker
+    * @property {string} event.side - Either `'start'` or `'end'` indicating whether `startDate` or `endDate` was changed. `null` for singleDatePicker
     */
     onTimeChange: { type: "timeChange", param: (side) => {
       return side;
@@ -716,8 +716,8 @@ class DateRangePicker {
     * @name "monthViewChange"
     * @property {DateRangePickerEvent} event - The Event object
     * @property {DateRangePicker} event.picker - The daterangepicker object
-    * @property {external:DateTime} left - The first day of month in left-hand calendar
-    * @property {external:DateTime} right - The first day of month in left-hand calendar or `null` for singleDatePicker
+    * @property {external:DateTime} event.left - The first day of month in left-hand calendar
+    * @property {external:DateTime} event.right - The first day of month in left-hand calendar or `null` for singleDatePicker
     */
     onMonthViewChange: {
       type: "monthViewChange",
@@ -1953,31 +1953,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;
       }