@wernfried/daterangepicker 5.7.1 → 5.8.1

package/API_Doc.md

@@ -119,8 +119,8 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
     * [.updateAltInput()](#DateRangePicker+updateAltInput)
     * [.remove()](#DateRangePicker+remove)
     * [.triggerEvent(ev, ...args)](#DateRangePicker+triggerEvent)
-    * [.addEventListener(type, listener, [options])](#DateRangePicker+addEventListener)
-    * [.removeEventListener(type, listener, [options])](#DateRangePicker+removeEventListener)
+    * [.addEventListener(type, listener, [options])](#DateRangePicker+addEventListener) ⇒ [<code>DateRangePicker</code>](#DateRangePicker)
+    * [.removeEventListener(type, listener, [options])](#DateRangePicker+removeEventListener) ⇒ [<code>DateRangePicker</code>](#DateRangePicker)
 
 <a name="new_DateRangePicker_new"></a>
 
@@ -376,11 +376,12 @@ Helper function to dispatch events
 
 <a name="DateRangePicker+addEventListener"></a>
 
-### dateRangePicker.addEventListener(type, listener, [options])
+### dateRangePicker.addEventListener(type, listener, [options]) ⇒ [<code>DateRangePicker</code>](#DateRangePicker)
 Adding event listener to input element where dateragnepicker is attached to.
 Wrapper to give easy access for `addEventListener()` on DateRangePicker instance.
 
 **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
+**Returns**: [<code>DateRangePicker</code>](#DateRangePicker) - - The DateRangePicker instance, usefull for chaining  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -396,11 +397,12 @@ picker.addEventListener('hide', (e) => {
 ```
 <a name="DateRangePicker+removeEventListener"></a>
 
-### dateRangePicker.removeEventListener(type, listener, [options])
+### dateRangePicker.removeEventListener(type, listener, [options]) ⇒ [<code>DateRangePicker</code>](#DateRangePicker)
 Counterpart to `addEventListener()`
 Note, `listener` most be a named function to enable remove.
 
 **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
+**Returns**: [<code>DateRangePicker</code>](#DateRangePicker) - - The DateRangePicker instance, usefull for chaining  
 
 | Param | Type | Description |
 | --- | --- | --- |
@@ -712,8 +714,8 @@ Options for DateRangePicker
 | 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> |
 | 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> 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)` |
-| altInput | <code>string</code> \| <code>Array</code> \| [<code>HTMLInputElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | <code>null</code> | A [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)<br> string or `HTMLElement` for an alternative output (typically hidden) `<input>` element. Uses `altFormat` to format the value.<br> Must be a single string/HTMLElement for `singleDatePicker: true` or an array of two strings or HTMLElement for `singleDatePicker: false`<br> Example: `['#start', '#end']` |
-| altFormat | <code>function</code> \| <code>string</code> |  | The output format used for `altInput`.<br> Default: ISO-8601 basic format without time zone, precisison is derived from `timePicker` and `timePickerStepSize`<br> Example `yyyyMMdd'T'HHmm` for `timePicker=true` and display of Minutes<br>  If defined, either a string used with [Format tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or a function.<br> Examples: `"yyyy:MM:dd'T'HH:mm"`,<br>`(date) => date.toUnixInteger()` |
+| altInput | <code>string</code> \| <code>Array</code> \| [<code>HTMLInputElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) \| [<code>HTMLCollection</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) | <code>null</code> | A [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)<br> string matching a single `<input>` element or an `HTMLInputElement` for the alternative output. Uses `altFormat` to format the value.<br> For `singleDatePicker: false` you may provide:<br> - A CSS querySelector string matching exactly two `<input>` elements (e.g., `'.start-date, .end-date'`)<br> - An array of two strings or `HTMLInputElement` elements<br> - An `HTMLCollection` of two `HTMLInputElement` elements<br> Uses `altFormat` to format the values.<br> Examples: `'#start, #end'`, `['#start', '#end']`, or `[startInput, endInput]` |
+| altFormat | <code>function</code> \| <code>string</code> \| <code>object</code> |  | The output format used for `altInput`.<br> Either a string of [Format tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or  [DateTime.toISO()](https://moment.github.io/luxon/api-docs/index.html#datetimetoiso) opts object or a function.<br> Default: `{format: 'extended', precision: <derived from timePickerStepSize>, includeOffset: false}`<br> Examples: `"yyyy:MM:dd'T'HH:mm"`<br> `(date) => date.toUnixInteger()` for singleDatePicker: true or altInput[]<br> `(interval) => interval.toISO('yyyy:MM:dd', {separator: '..'})` for singleDatePicker: false and single altInput |
 | 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 |
 | buttonClasses | <code>string</code> |  | Default: `'btn btn-sm'`<br>CSS class names that will be added to both the apply and cancel buttons. |

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.7.1/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.8.1/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.8.1/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.7.1/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.8.1/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.8.1/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.7.1/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.8.1/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.7.1/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.8.1/css/daterangepicker.bulma.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -122,8 +122,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.7.1/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.8.1/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.8.1/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -377,8 +377,8 @@ Options for DateRangePicker
 | 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> |
 | 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> 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)` |
-| altInput | <code>string</code> \| <code>Array</code> \| [<code>HTMLInputElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | <code>null</code> | A [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)<br> string or `HTMLElement` for an alternative output (typically hidden) `<input>` element. Uses `altFormat` to format the value.<br> Must be a single string/HTMLElement for `singleDatePicker: true` or an array of two strings or HTMLElement for `singleDatePicker: false`<br> Example: `['#start', '#end']` |
-| altFormat | <code>function</code> \| <code>string</code> |  | The output format used for `altInput`.<br> Default: ISO-8601 basic format without time zone, precisison is derived from `timePicker` and `timePickerStepSize`<br> Example `yyyyMMdd'T'HHmm` for `timePicker=true` and display of Minutes<br>  If defined, either a string used with [Format tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or a function.<br> Examples: `"yyyy:MM:dd'T'HH:mm"`,<br>`(date) => date.toUnixInteger()` |
+| altInput | <code>string</code> \| <code>Array</code> \| [<code>HTMLInputElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) \| [<code>HTMLCollection</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) | <code>null</code> | A [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)<br> string matching a single `<input>` element or an `HTMLInputElement` for the alternative output. Uses `altFormat` to format the value.<br> For `singleDatePicker: false` you may provide:<br> - A CSS querySelector string matching exactly two `<input>` elements (e.g., `'.start-date, .end-date'`)<br> - An array of two strings or `HTMLInputElement` elements<br> - An `HTMLCollection` of two `HTMLInputElement` elements<br> Uses `altFormat` to format the values.<br> Examples: `'#start, #end'`, `['#start', '#end']`, or `[startInput, endInput]` |
+| altFormat | <code>function</code> \| <code>string</code> \| <code>object</code> |  | The output format used for `altInput`.<br> Either a string of [Format tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or  [DateTime.toISO()](https://moment.github.io/luxon/api-docs/index.html#datetimetoiso) opts object or a function.<br> Default: `{format: 'extended', precision: <derived from timePickerStepSize>, includeOffset: false}`<br> Examples: `"yyyy:MM:dd'T'HH:mm"`<br> `(date) => date.toUnixInteger()` for singleDatePicker: true or altInput[]<br> `(interval) => interval.toISO('yyyy:MM:dd', {separator: '..'})` for singleDatePicker: false and single altInput |
 | 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 |
 | buttonClasses | <code>string</code> |  | Default: `'btn btn-sm'`<br>CSS class names that will be added to both the apply and cancel buttons. |

package/dist/cjs/daterangepicker.cjs

@@ -413,27 +413,33 @@ class DateRangePicker {
         }
       }
     }
-    if (this.singleDatePicker) {
-      if (typeof options.altInput === "string") {
+    if (["function", "string", "object"].includes(typeof options.altFormat))
+      this.altFormat = options.altFormat;
+    if (typeof options.altInput === "string") {
+      if (this.singleDatePicker) {
         const el = document.querySelector(options.altInput);
-        this.altInput = el instanceof HTMLInputElement && ["text", "hidden"].includes(el.type) ? el : null;
-      } else if (options.altInput instanceof HTMLElement) {
-        this.altInput = options.altInput instanceof HTMLInputElement && ["text", "hidden"].includes(options.altInput.type) ? options.altInput : null;
-      }
-    } else if (!this.singleDatePicker && Array.isArray(options.altInput) && options.altInput.length === 2) {
-      this.altInput = [];
-      for (let item of options.altInput) {
-        const el = typeof item === "string" ? document.querySelector(item) : item;
         if (el instanceof HTMLInputElement && ["text", "hidden"].includes(el.type))
-          this.altInput.push(el);
-      }
-      if (this.altInput.length !== 2)
-        this.altInput = null;
-    } else if (options.altInput != null) {
-      console.warn(`Option 'altInput' ${JSON.stringify(options.altInput)} is not valid`);
-    }
-    if (options.altInput && ["function", "string"].includes(typeof options.altFormat))
-      this.altFormat = options.altFormat;
+          this.altInput = el;
+      } else {
+        const el = Array.from(document.querySelectorAll(options.altInput));
+        if ([1, 2].includes(el.length) && el.every((x) => x instanceof HTMLInputElement && ["text", "hidden"].includes(x.type)))
+          this.altInput = el.length === 1 ? el[0] : el;
+      }
+    } else if (options.altInput instanceof HTMLElement && ["text", "hidden"].includes(options.altInput.type)) {
+      this.altInput = options.altInput;
+    } else if (Array.isArray(options.altInput) || options.altInput instanceof HTMLCollection || options.altInput instanceof NodeList) {
+      let el = Array.isArray(options.altInput) ? options.altInput : Array.from(options.altInput);
+      if (!this.singleDatePicker && el.length === 2) {
+        if (el.every((x) => typeof x === "string"))
+          el = el.map((x) => {
+            return document.querySelector(x);
+          });
+        if (el.every((x) => x instanceof HTMLInputElement && ["text", "hidden"].includes(x.type)))
+          this.altInput = el;
+      }
+    }
+    if (options.altInput != null && this.altInput == null)
+      console.error(`Option 'altInput' ${JSON.stringify(options.altInput)} is not valid`);
     if (typeof options.opens === "string") {
       if (["left", "right", "center"].includes(options.opens))
         this.opens = options.opens;
@@ -876,24 +882,41 @@ class DateRangePicker {
    * @param {sting|external:DateTime|Date} month - The month to be shown, if null then current month is selected.
    */
   clearDate(month) {
-    const initialMonth = this.parseDate(month ?? this.#startDate.startOf("month"));
+    if (this.#startDate == null && this.#endDate == null)
+      return;
+    const monthChange = month !== void 0 && !this.parseDate(month).hasSame(this.#startDate, "month");
+    if (monthChange)
+      this.#startDate = this.parseDate(month);
+    this.updateMonthsInView();
     this.oldStartDate = this.#startDate;
     this.oldEndDate = this.#endDate;
     this.#startDate = null;
     this.#endDate = null;
+    this.updateCalendars(monthChange);
+    this.setApplyBtnState();
+    if (this.timePicker) {
+      this.triggerEvent(this.#events.onBeforeRenderTimePicker);
+      this.renderTimePicker("start");
+      this.renderTimePicker("end");
+      this.container.querySelectorAll(".calendar-time.end-time select").forEach((el) => {
+        el.disabled = !this.#endDate;
+      });
+      this.container.querySelectorAll(".calendar-time.end-time select").forEach((el) => {
+        el.classList.toggle("disabled", !this.#endDate);
+      });
+    }
     if (this.isInputText)
       this.element.value = "";
     if (!this.singleDatePicker)
       this.chosenLabel = null;
     if (this.altInput) {
-      if (this.singleDatePicker) {
+      if (this.singleDatePicker || !Array.isArray(this.altInput)) {
         this.altInput.value = "";
       } else {
         this.altInput[0].value = "";
         this.altInput[1].value = "";
       }
     }
-    this.updateView(!initialMonth.hasSame(this.oldStartDate, "month"));
   }
   /**
    * Parse date value
@@ -2300,7 +2323,7 @@ class DateRangePicker {
   updateAltInput() {
     if (this.altInput == null)
       return;
-    if (this.altFormat == null) {
+    if (this.altFormat == null || typeof this.altFormat === "object") {
       let precision = "day";
       if (this.timePicker) {
         if (this.timePickerOpts.showSeconds) {
@@ -2311,18 +2334,37 @@ class DateRangePicker {
           precision = "hour";
         }
       }
-      const startDate = this.#startDate.toISO({ format: "basic", precision, includeOffset: false });
-      (this.singleDatePicker ? this.altInput : this.altInput[0]).value = startDate;
-      if (!this.singleDatePicker && this.#endDate) {
-        const endDate = this.#endDate.toISO({ format: "basic", precision, includeOffset: false });
-        this.altInput[1].value = endDate;
+      const isoOptions = this.altFormat ?? { format: "basic", precision, includeOffset: false };
+      const startDate = this.#startDate.toISO(isoOptions);
+      if (this.singleDatePicker) {
+        this.altInput.value = startDate;
+      } else if (this.#endDate) {
+        const endDate = this.#endDate.toISO(isoOptions);
+        if (Array.isArray(this.altInput)) {
+          this.altInput[0].value = startDate;
+          this.altInput[1].value = endDate;
+        } else {
+          const interval = luxon.Interval.fromDateTimes(this.#startDate, this.#endDate);
+          this.altInput.value = interval.toISO(isoOptions);
+        }
       }
     } else {
-      const startDate = typeof this.altFormat === "function" ? this.altFormat(this.#startDate) : this.formatDate(this.#startDate, this.altFormat);
-      (this.singleDatePicker ? this.altInput : this.altInput[0]).value = startDate;
-      if (!this.singleDatePicker && this.#endDate) {
-        const endDate = typeof this.altFormat === "function" ? this.altFormat(this.#endDate) : this.formatDate(this.#endDate, this.altFormat);
-        this.altInput[1].value = endDate;
+      const startDate = typeof this.altFormat === "function" ? this.altFormat(this.#startDate) : this.toFormat(this.#startDate, this.altFormat);
+      if (this.singleDatePicker) {
+        this.altInput.value = startDate;
+      } else if (this.#endDate) {
+        const endDate = typeof this.altFormat === "function" ? this.altFormat(this.#endDate) : this.toFormat(this.#endDate, this.altFormat);
+        if (Array.isArray(this.altInput)) {
+          this.altInput[0].value = startDate;
+          this.altInput[1].value = endDate;
+        } else {
+          const interval = luxon.Interval.fromDateTimes(this.#startDate, this.#endDate);
+          if (typeof this.altFormat === "function") {
+            this.altInput.value = this.altFormat(interval);
+          } else {
+            this.altInput.value = this.toFormat(interval, this.altFormat, { separator: "/" });
+          }
+        }
       }
     }
   }
@@ -2384,6 +2426,7 @@ class DateRangePicker {
    * @param {boolean|object} [options] - Optional event options:
    *   - `boolean capture`: Whether to listen in the capture phase (default: `false`)
    *   - `object signal`: An `AbortSignal` for later removal of the listener (default: `undefined`)
+   * @returns {DateRangePicker} - The DateRangePicker instance, usefull for chaining
    * 
    * @example
    * picker.addEventListener('hide', (e) => {
@@ -2393,6 +2436,7 @@ class DateRangePicker {
    */
   addEventListener(type, listener, options) {
     this.element.addEventListener(type, listener, options);
+    return this;
   }
   /**
    * Counterpart to `addEventListener()`
@@ -2403,9 +2447,11 @@ class DateRangePicker {
    * @param {boolean|object} [options] - Optional event options:
    *   - `boolean capture`: Whether to listen in the capture phase (default: `false`)
    *   - `object signal`: An `AbortSignal` for later removal of the listener (default: `undefined`)
-   */
+   * @returns {DateRangePicker} - The DateRangePicker instance, usefull for chaining
+  */
   removeEventListener(type, listener, options) {
     this.element.removeEventListener(type, listener, options);
+    return this;
   }
 }
 function createElementFromHTML(html) {