@wernfried/daterangepicker 5.7.1 → 5.8.1

package/dist/esm/daterangepicker.js

@@ -1,4 +1,4 @@
-import { DateTime, Duration, Info, Settings } from "luxon";
+import { DateTime, Duration, Info, Settings, Interval } from "luxon";
 class DateRangePicker {
   #startDate = null;
   #endDate = null;
@@ -412,27 +412,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;
@@ -875,24 +881,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
@@ -2299,7 +2322,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) {
@@ -2310,18 +2333,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 = 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 = 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: "/" });
+          }
+        }
       }
     }
   }
@@ -2383,6 +2425,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) => {
@@ -2392,6 +2435,7 @@ class DateRangePicker {
    */
   addEventListener(type, listener, options) {
     this.element.addEventListener(type, listener, options);
+    return this;
   }
   /**
    * Counterpart to `addEventListener()`
@@ -2402,9 +2446,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) {