@wernfried/daterangepicker 5.2.0 → 5.2.2

package/dist/cjs/daterangepicker.js

@@ -0,0 +1,2367 @@
+"use strict";
+var luxon = require("luxon");
+class DateRangePicker {
+  #startDate = null;
+  #endDate = null;
+  constructor(element, options, cb) {
+    if (typeof element === "string" && document.querySelectorAll(element).length > 1)
+      throw new RangeError(`Option 'element' must match to one element only`);
+    this.parentEl = "body";
+    this.element = element instanceof HTMLElement ? element : document.querySelector(element);
+    this.isInputText = this.element instanceof HTMLInputElement && this.element.type === "text";
+    this.#startDate = luxon.DateTime.now().startOf("day");
+    this.#endDate = luxon.DateTime.now().plus({ day: 1 }).startOf("day");
+    this.minDate = null;
+    this.maxDate = null;
+    this.maxSpan = null;
+    this.minSpan = null;
+    this.defaultSpan = null;
+    this.initalMonth = luxon.DateTime.now().startOf("month");
+    this.autoApply = false;
+    this.singleDatePicker = false;
+    this.singleMonthView = false;
+    this.showDropdowns = false;
+    this.minYear = luxon.DateTime.now().minus({ year: 100 }).year;
+    this.maxYear = luxon.DateTime.now().plus({ year: 100 }).year;
+    this.showWeekNumbers = false;
+    this.showISOWeekNumbers = false;
+    this.showCustomRangeLabel = true;
+    this.showLabel = !this.isInputText;
+    this.timePicker = false;
+    const usesMeridiems = new Intl.DateTimeFormat(luxon.DateTime.now().locale, { hour: "numeric" }).resolvedOptions();
+    this.timePicker24Hour = !usesMeridiems.hour12;
+    this.timePickerStepSize = luxon.Duration.fromObject({ minutes: 1 });
+    this.linkedCalendars = true;
+    this.autoUpdateInput = true;
+    this.alwaysShowCalendars = false;
+    this.isInvalidDate = null;
+    this.isInvalidTime = null;
+    this.isCustomDate = null;
+    this.onOutsideClick = "apply";
+    this.opens = this.element?.classList.contains("pull-right") ? "left" : "right";
+    this.drops = this.element?.classList.contains("dropup") ? "up" : "down";
+    this.buttonClasses = "btn btn-sm";
+    this.applyButtonClasses = "btn-primary";
+    this.cancelButtonClasses = "btn-default";
+    this.weekendClasses = "weekend";
+    this.weekendDayClasses = "weekend-day";
+    this.todayClasses = "today";
+    this.altInput = null;
+    this.altFormat = null;
+    this.externalStyle = null;
+    this.ranges = {};
+    this.locale = {
+      direction: "ltr",
+      format: luxon.DateTime.DATE_SHORT,
+      // or DateTime.DATETIME_SHORT when timePicker: true
+      separator: " - ",
+      applyLabel: "Apply",
+      cancelLabel: "Cancel",
+      weekLabel: "W",
+      customRangeLabel: "Custom Range",
+      daysOfWeek: luxon.Info.weekdays("short"),
+      monthNames: luxon.Info.months("long"),
+      firstDay: luxon.Info.getStartOfWeek(),
+      durationFormat: null
+    };
+    if (this.element == null)
+      return;
+    this.callback = function() {
+    };
+    this.isShowing = false;
+    this.leftCalendar = {};
+    this.rightCalendar = {};
+    if (typeof options !== "object" || options === null)
+      options = {};
+    let dataOptions = {};
+    const data = Array.from(this.element.attributes).filter((x) => x.name.startsWith("data-"));
+    for (let item of data) {
+      const name = item.name.replace(/^data-/g, "").replace(/-([a-z])/g, function(str) {
+        return str[1].toUpperCase();
+      });
+      if (!Object.keys(this).concat(["startDate", "endDate"]).includes(name) || Object.keys(options).includes(name))
+        continue;
+      let ts = luxon.DateTime.fromISO(item.value);
+      const isDate = ["startDate", "endDate", "minDate", "maxDate", "initalMonth"].includes(name);
+      dataOptions[name] = ts.isValid && isDate ? ts : JSON.parse(item.value);
+    }
+    options = { ...dataOptions, ...options };
+    if (typeof options.singleDatePicker === "boolean")
+      this.singleDatePicker = options.singleDatePicker;
+    if (!this.singleDatePicker && typeof options.singleMonthView === "boolean") {
+      this.singleMonthView = options.singleMonthView;
+    } else {
+      this.singleMonthView = false;
+    }
+    if (!(options.externalStyle === null)) {
+      const bodyStyle = window.getComputedStyle(document.body);
+      if (bodyStyle && typeof bodyStyle[Symbol.iterator] === "function" && [...bodyStyle].some((x) => x.startsWith("--bulma-")))
+        this.externalStyle = "bulma";
+    }
+    if (typeof options.template === "string" || options.template instanceof HTMLElement) {
+      this.container = typeof options.template === "string" ? createElementFromHTML(options.template) : options.template;
+    } else {
+      let template = [
+        '<div class="daterangepicker">',
+        '<div class="ranges"></div>',
+        '<div class="drp-calendar left">',
+        '<table class="calendar-table">',
+        "<thead></thead>",
+        "<tbody></tbody>",
+        "<tfoot>",
+        '<tr class="calendar-time start-time"></tr>',
+        this.singleMonthView ? '<tr class="calendar-time end-time"></tr>' : "",
+        "</tfoot>",
+        "</table>",
+        "</div>"
+      ];
+      template.push(...[
+        '<div class="drp-calendar right">',
+        '<table class="calendar-table">',
+        "<thead></thead>",
+        "<tbody></tbody>",
+        "<tfoot>",
+        this.singleMonthView ? "" : '<tr class="calendar-time end-time"></tr>',
+        "</tfoot>",
+        "</table>",
+        "</div>"
+      ]);
+      template.push(...[
+        '<div class="drp-buttons">',
+        '<div class="drp-duration-label"></div>',
+        '<div class="drp-selected"></div>'
+      ]);
+      if (this.externalStyle === "bulma") {
+        template.push(...[
+          '<div class="buttons">',
+          '<button class="cancelBtn button is-small" type="button"></button>',
+          '<button class="applyBtn button is-small" disabled type="button"></button>',
+          "</div>"
+        ]);
+      } else {
+        template.push(...[
+          "<div>",
+          '<button class="cancelBtn" type="button"></button>',
+          '<button class="applyBtn" disabled type="button"></button>',
+          "</div>"
+        ]);
+      }
+      template.push("</div></div>");
+      options.template = template.join("");
+      this.container = createElementFromHTML(options.template);
+    }
+    this.parentEl = document.querySelector(typeof options.parentEl === "string" ? options.parentEl : this.parentEl);
+    this.parentEl.appendChild(this.container);
+    if (typeof options.timePicker === "boolean")
+      this.timePicker = options.timePicker;
+    if (this.timePicker)
+      this.locale.format = luxon.DateTime.DATETIME_SHORT;
+    if (typeof options.locale === "object") {
+      for (let key2 of ["separator", "applyLabel", "cancelLabel", "weekLabel"]) {
+        if (typeof options.locale[key2] === "string")
+          this.locale[key2] = options.locale[key2];
+      }
+      if (typeof options.locale.direction === "string") {
+        if (["rtl", "ltr"].includes(options.locale.direction))
+          this.locale.direction = options.locale.direction;
+        else
+          console.error(`Option 'options.locale.direction' must be 'rtl' or 'ltr'`);
+      }
+      if (["string", "object"].includes(typeof options.locale.format))
+        this.locale.format = options.locale.format;
+      if (Array.isArray(options.locale.daysOfWeek)) {
+        if (options.locale.daysOfWeek.some((x) => typeof x !== "string"))
+          console.error(`Option 'options.locale.daysOfWeek' must be an array of strings`);
+        else
+          this.locale.daysOfWeek = options.locale.daysOfWeek.slice();
+      }
+      if (Array.isArray(options.locale.monthNames)) {
+        if (options.locale.monthNames.some((x) => typeof x !== "string"))
+          console.error(`Option 'locale.monthNames' must be an array of strings`);
+        else
+          this.locale.monthNames = options.locale.monthNames.slice();
+      }
+      if (typeof options.locale.firstDay === "number")
+        this.locale.firstDay = options.locale.firstDay;
+      if (typeof options.locale.customRangeLabel === "string") {
+        var elem = document.createElement("textarea");
+        elem.innerHTML = options.locale.customRangeLabel;
+        var rangeHtml = elem.value;
+        this.locale.customRangeLabel = rangeHtml;
+      }
+      if (["string", "object", "function"].includes(typeof options.locale.durationFormat) && options.locale.durationFormat != null)
+        this.locale.durationFormat = options.locale.durationFormat;
+    }
+    this.container.classList.add(this.locale.direction);
+    for (let key2 of [
+      "timePicker24Hour",
+      "showWeekNumbers",
+      "showISOWeekNumbers",
+      "showDropdowns",
+      "linkedCalendars",
+      "showCustomRangeLabel",
+      "alwaysShowCalendars",
+      "autoApply",
+      "autoUpdateInput",
+      "showLabel"
+    ]) {
+      if (typeof options[key2] === "boolean")
+        this[key2] = options[key2];
+    }
+    for (let key2 of ["applyButtonClasses", "cancelButtonClasses", "weekendClasses", "weekendDayClasses", "todayClasses"]) {
+      if (typeof options[key2] === "string") {
+        this[key2] = options[key2];
+      } else if (["weekendClasses", "weekendDayClasses", "todayClasses"].includes(key2) && options[key2] === null) {
+        this[key2] = options[key2];
+      }
+    }
+    for (let key2 of ["minYear", "maxYear"]) {
+      if (typeof options[key2] === "number")
+        this[key2] = options[key2];
+    }
+    for (let key2 of ["isInvalidDate", "isInvalidTime", "isCustomDate"]) {
+      if (typeof options[key2] === "function")
+        this[key2] = options[key2];
+      else
+        this[key2] = function() {
+          return false;
+        };
+    }
+    if (!this.singleDatePicker) {
+      for (let opt of ["minSpan", "maxSpan", "defaultSpan"]) {
+        if (["string", "number", "object"].includes(typeof options[opt])) {
+          if (luxon.Duration.isDuration(options[opt]) && options[opt].isValid) {
+            this[opt] = options[opt];
+          } else if (luxon.Duration.fromISO(options[opt]).isValid) {
+            this[opt] = luxon.Duration.fromISO(options[opt]);
+          } else if (typeof options[opt] === "number" && luxon.Duration.fromObject({ seconds: options[opt] }).isValid) {
+            this[opt] = luxon.Duration.fromObject({ seconds: options[opt] });
+          } else if (options[opt] === null) {
+            this[opt] = null;
+          } else {
+            console.error(`Option '${key}' is not valid`);
+          }
+        }
+      }
+      if (this.minSpan && this.maxSpan && this.minSpan > this.maxSpan) {
+        this.minSpan = null;
+        this.maxSpan = null;
+        console.warn(`Ignore option 'minSpan' and 'maxSpan', because 'minSpan' must be smaller than 'maxSpan'`);
+      }
+      if (this.defaultSpan && this.minSpan && this.minSpan > this.defaultSpan) {
+        this.defaultSpan = null;
+        console.warn(`Ignore option 'defaultSpan', because 'defaultSpan' must be greater than 'minSpan'`);
+      } else if (this.defaultSpan && this.maxSpan && this.maxSpan < this.defaultSpan) {
+        this.defaultSpan = null;
+        console.warn(`Ignore option 'defaultSpan', because 'defaultSpan' must be smaller than 'maxSpan'`);
+      }
+    }
+    if (this.timePicker) {
+      if (["string", "object", "number"].includes(typeof options.timePickerStepSize)) {
+        let duration;
+        if (luxon.Duration.isDuration(options.timePickerStepSize) && options.timePickerStepSize.isValid) {
+          duration = options.timePickerStepSize;
+        } else if (luxon.Duration.fromISO(options.timePickerStepSize).isValid) {
+          duration = luxon.Duration.fromISO(options.timePickerStepSize);
+        } else if (typeof options.timePickerStepSize === "number" && luxon.Duration.fromObject({ seconds: options.timePickerStepSize }).isValid) {
+          duration = luxon.Duration.fromObject({ seconds: options.timePickerStepSize });
+        } else {
+          console.error(`Option 'timePickerStepSize' is not valid`);
+          duration = this.timePickerStepSize;
+        }
+        var valid = [];
+        for (let unit of ["minutes", "seconds"])
+          valid.push(...[1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30].map((x) => {
+            return luxon.Duration.fromObject({ [unit]: x });
+          }));
+        valid.push(...[1, 2, 3, 4, 6].map((x) => {
+          return luxon.Duration.fromObject({ hours: x });
+        }));
+        if (this.timePicker24Hour)
+          valid.push(...[8, 12].map((x) => {
+            return luxon.Duration.fromObject({ hours: x });
+          }));
+        if (valid.some((x) => duration.rescale().equals(x))) {
+          this.timePickerStepSize = duration.rescale();
+        } else {
+          console.error(`Option 'timePickerStepSize' ${JSON.stringify(duration.toObject())} is not valid`);
+        }
+      }
+      if (this.maxSpan && this.timePickerStepSize > this.maxSpan)
+        console.error(`Option 'timePickerStepSize' ${JSON.stringify(this.timePickerStepSize.toObject())} must be smaller than 'maxSpan'`);
+      this.timePickerOpts = {
+        showMinutes: this.timePickerStepSize < luxon.Duration.fromObject({ hours: 1 }),
+        showSeconds: this.timePickerStepSize < luxon.Duration.fromObject({ minutes: 1 }),
+        hourStep: this.timePickerStepSize >= luxon.Duration.fromObject({ hours: 1 }) ? this.timePickerStepSize.hours : 1,
+        minuteStep: this.timePickerStepSize >= luxon.Duration.fromObject({ minutes: 1 }) ? this.timePickerStepSize.minutes : 1,
+        secondStep: this.timePickerStepSize.seconds
+      };
+    }
+    for (let opt of ["startDate", "endDate", "minDate", "maxDate", "initalMonth"]) {
+      if (opt === "endDate" && this.singleDatePicker)
+        continue;
+      if (typeof options[opt] === "object") {
+        if (luxon.DateTime.isDateTime(options[opt]) && options[opt].isValid) {
+          this[opt] = options[opt];
+        } else if (options[opt] instanceof Date) {
+          this[opt] = luxon.DateTime.fromJSDate(options[opt]);
+        } else if (options[opt] === null) {
+          this[opt] = null;
+        } else {
+          console.error(`Option '${opt}' must be a luxon.DateTime or Date or string`);
+        }
+      } else if (typeof options[opt] === "string") {
+        const format = typeof this.locale.format === "string" ? this.locale.format : luxon.DateTime.parseFormatForOpts(this.locale.format);
+        if (luxon.DateTime.fromISO(options[opt]).isValid) {
+          this[opt] = luxon.DateTime.fromISO(options[opt]);
+        } else if (luxon.DateTime.fromFormat(options[opt], format, { locale: luxon.DateTime.now().locale }).isValid) {
+          this[opt] = luxon.DateTime.fromFormat(options[opt], format, { locale: luxon.DateTime.now().locale });
+        } else {
+          const invalid = luxon.DateTime.fromFormat(options[opt], format, { locale: luxon.DateTime.now().locale }).invalidExplanation;
+          console.error(`Option '${opt}' is not a valid string: ${invalid}`);
+        }
+      }
+    }
+    if (this.isInputText) {
+      if (this.element.value != "") {
+        const format = typeof this.locale.format === "string" ? this.locale.format : luxon.DateTime.parseFormatForOpts(this.locale.format);
+        if (this.singleDatePicker && typeof options.startDate === "undefined") {
+          const start = luxon.DateTime.fromFormat(this.element.value, format, { locale: luxon.DateTime.now().locale });
+          if (start.isValid) {
+            this.#startDate = start;
+          } else {
+            console.error(`Value "${this.element.value}" in <input> is not a valid string: ${start.invalidExplanation}`);
+          }
+        } else if (!this.singleDatePicker && typeof options.startDate === "undefined" && typeof options.endDate === "undefined") {
+          const split = this.element.value.split(this.locale.separator);
+          if (split.length === 2) {
+            const start = luxon.DateTime.fromFormat(split[0], format, { locale: luxon.DateTime.now().locale });
+            const end = luxon.DateTime.fromFormat(split[1], format, { locale: luxon.DateTime.now().locale });
+            if (start.isValid && end.isValid) {
+              this.#startDate = start;
+              this.#endDate = end;
+            } else {
+              console.error(`Value in <input> is not a valid string: ${start.invalidExplanation} - ${end.invalidExplanation}`);
+            }
+          } else {
+            console.error(`Value "${this.element.value}" in <input> is not a valid string`);
+          }
+        }
+      }
+    }
+    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 (!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 (!this.#startDate && this.initalMonth) {
+      this.#endDate = null;
+      if (this.timePicker)
+        console.error(`Option 'initalMonth' works only with 'timePicker: false'`);
+    } else {
+      const violations = this.validateInput(null, false);
+      if (violations != null) {
+        let vio = violations.startDate;
+        if (vio.length > 0) {
+          if (vio.some((x) => x.reason.startsWith("isInvalid"))) {
+            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 (typeof process !== "undefined" && process.env.JEST_WORKER_ID == null)
+              console.warn(`Correcting startDate from ${this.#startDate} to ${newDate}`);
+            this.#startDate = newDate;
+          }
+        }
+        if (!this.singleDatePicker) {
+          vio = violations.endDate.filter((x) => x.new != null);
+          if (vio.length > 0) {
+            if (vio.some((x) => x.reason.startsWith("isInvalid"))) {
+              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 (typeof process !== "undefined" && process.env.JEST_WORKER_ID == null)
+                console.warn(`Correcting endDate from ${this.#endDate} to ${newDate}`);
+              this.#endDate = newDate;
+            }
+          }
+        }
+      }
+    }
+    if (this.singleDatePicker) {
+      if (typeof options.altInput === "string") {
+        const el = document.querySelector(options.altInput);
+        this.altInput = el instanceof HTMLInputElement && el.type === "text" ? el : null;
+      } else if (options.altInput instanceof HTMLElement) {
+        this.altInput = options.altInput instanceof HTMLInputElement && options.altInput.type === "text" ? 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 && el.type === "text")
+          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;
+    if (typeof options.opens === "string") {
+      if (["left", "right", "center"].includes(options.opens))
+        this.opens = options.opens;
+      else
+        console.error(`Option 'options.opens' must be 'left', 'right' or 'center'`);
+    }
+    if (typeof options.drops === "string") {
+      if (["up", "down", "auto"].includes(options.drops))
+        this.drops = options.drops;
+      else
+        console.error(`Option 'options.drops' must be 'up', 'down' or 'auto'`);
+    }
+    if (Array.isArray(options.buttonClasses)) {
+      this.buttonClasses = options.buttonClasses.join(" ");
+    } else if (typeof options.buttonClasses === "string") {
+      this.buttonClasses = options.buttonClasses;
+    }
+    if (typeof options.onOutsideClick === "string") {
+      if (["cancel", "apply"].includes(options.onOutsideClick))
+        this.onOutsideClick = options.onOutsideClick;
+      else
+        console.error(`Option 'options.onOutsideClick' must be 'cancel' or 'apply'`);
+    }
+    if (this.locale.firstDay != 1) {
+      let iterator = this.locale.firstDay;
+      while (iterator > 1) {
+        this.locale.daysOfWeek.push(this.locale.daysOfWeek.shift());
+        iterator--;
+      }
+    }
+    if (!this.singleDatePicker && typeof options.ranges === "object") {
+      for (let range in options.ranges) {
+        let start, end;
+        if (["string", "object"].includes(typeof options.ranges[range][0])) {
+          if (luxon.DateTime.isDateTime(options.ranges[range][0]) && options.ranges[range][0].isValid) {
+            start = options.ranges[range][0];
+          } else if (options.ranges[range][0] instanceof Date) {
+            start = luxon.DateTime.fromJSDate(options.ranges[range][0]);
+          } else if (typeof options.ranges[range][0] === "string" && luxon.DateTime.fromISO(options.ranges[range][0]).isValid) {
+            start = luxon.DateTime.fromISO(options.ranges[range][0]);
+          } else {
+            console.error(`Option ranges['${range}'] is not am array of valid ISO-8601 string or luxon.DateTime or Date`);
+          }
+        }
+        if (["string", "object"].includes(typeof options.ranges[range][1])) {
+          if (luxon.DateTime.isDateTime(options.ranges[range][1]) && options.ranges[range][1].isValid) {
+            end = options.ranges[range][1];
+          } else if (options.ranges[range][1] instanceof Date) {
+            end = luxon.DateTime.fromJSDate(options.ranges[range][1]);
+          } else if (typeof options.ranges[range][1] === "string" && luxon.DateTime.fromISO(options.ranges[range][1]).isValid) {
+            end = luxon.DateTime.fromISO(options.ranges[range][1]);
+          } else {
+            console.error(`Option ranges['${range}'] is not a valid ISO-8601 string or luxon.DateTime or Date`);
+          }
+        }
+        if (start == null || end == null)
+          continue;
+        var elem = document.createElement("textarea");
+        elem.innerHTML = range;
+        this.ranges[elem.value] = [start, end];
+      }
+      var list = "<ul>";
+      for (let range in this.ranges)
+        list += `<li data-range-key="${range}">${range}</li>`;
+      if (this.showCustomRangeLabel)
+        list += `<li data-range-key="${this.locale.customRangeLabel}">${this.locale.customRangeLabel}</li>`;
+      list += "</ul>";
+      this.container.querySelector(".ranges").prepend(createElementFromHTML(list));
+      this.container.classList.add("show-ranges");
+    }
+    if (typeof cb === "function")
+      this.callback = cb;
+    if (!this.timePicker)
+      this.container.querySelectorAll(".calendar-time").forEach((el) => {
+        el.style.display = "none";
+      });
+    if (this.timePicker && this.autoApply)
+      this.autoApply = false;
+    if (this.autoApply)
+      this.container.classList.add("auto-apply");
+    if (this.singleDatePicker || this.singleMonthView) {
+      this.container.classList.add("single");
+      this.container.querySelector(".drp-calendar.left").classList.add("single");
+      this.container.querySelector(".drp-calendar.left").style.display = "";
+      this.container.querySelector(".drp-calendar.right").style.display = "none";
+      if (!this.timePicker && this.autoApply)
+        this.container.classList.add("auto-apply");
+    }
+    if (this.singleDatePicker || !Object.keys(this.ranges).length || this.alwaysShowCalendars)
+      this.container.classList.add("show-calendar");
+    this.container.classList.add(`opens${this.opens}`);
+    this.container.querySelectorAll(".applyBtn, .cancelBtn").forEach((el) => {
+      el.classList.add(...this.buttonClasses.split(" "));
+    });
+    if (this.applyButtonClasses.length)
+      this.container.querySelector(".applyBtn").classList.add(...this.applyButtonClasses.split(" "));
+    if (this.cancelButtonClasses.length)
+      this.container.querySelector(".cancelBtn").classList.add(...this.cancelButtonClasses.split(" "));
+    this.container.querySelector(".applyBtn").innerHTML = this.locale.applyLabel;
+    this.container.querySelector(".cancelBtn").innerHTML = this.locale.cancelLabel;
+    this.addListener(".drp-calendar", "click", ".prev", this.clickPrev.bind(this));
+    this.addListener(".drp-calendar", "click", ".next", this.clickNext.bind(this));
+    this.addListener(".drp-calendar", "mousedown", "td.available", this.clickDate.bind(this));
+    this.addListener(".drp-calendar", "mouseenter", "td.available", this.hoverDate.bind(this));
+    this.addListener(".drp-calendar", "change", "select.yearselect,select.monthselect", this.monthOrYearChanged.bind(this));
+    this.addListener(".drp-calendar", "change", "select.hourselect,select.minuteselect,select.secondselect,select.ampmselect", this.timeChanged.bind(this));
+    this.addListener(".ranges", "click", "li", this.clickRange.bind(this));
+    this.addListener(".ranges", "mouseenter", "li", this.hoverRange.bind(this));
+    this.addListener(".ranges", "mouseleave", "li", this.leaveRange.bind(this));
+    this.addListener(".drp-buttons", "click", "button.applyBtn", this.clickApply.bind(this));
+    this.addListener(".drp-buttons", "click", "button.cancelBtn", this.clickCancel.bind(this));
+    if (this.element.matches("input") || this.element.matches("button")) {
+      this.element.addEventListener("click", this.#showProxy);
+      this.element.addEventListener("focus", this.#showProxy);
+      this.element.addEventListener("keyup", this.#elementChangedProxy);
+      this.element.addEventListener("keydown", this.#keydownProxy);
+    } else {
+      this.element.addEventListener("click", this.#toggleProxy);
+      this.element.addEventListener("keydown", this.#toggleProxy);
+    }
+    this.updateElement();
+  }
+  /**
+   * startDate
+   * @type {external:DateTime}
+   */
+  get startDate() {
+    return this.timePicker ? this.#startDate : this.#startDate.startOf("day");
+  }
+  /**
+   * endDate
+   * @type {external:DateTime}
+   */
+  get endDate() {
+    return this.singleDatePicker ? null : this.timePicker ? this.#endDate : this.#endDate.endOf("day");
+  }
+  set startDate(val) {
+    this.#startDate = val;
+  }
+  set endDate(val) {
+    this.#endDate = val;
+  }
+  /**
+   * DateRangePicker specific events
+   */
+  #events = {
+    /**
+    * Emitted when the date is changed through `<input>` element or via {@link #DateRangePicker+setStartDate|setStartDate} or 
+    * {@link #DateRangePicker+setRange|setRange} and date is not valid due to 
+    * `minDate`, `maxDate`, `minSpan`, `maxSpan`, `invalidDate` and `invalidTime` constraints.<br>
+    * Event is only triggered when date string is valid and date value is changing<br>
+    * @event
+    * @name "violate"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    * @property {InputViolation} event.violation - The daterangepicker object
+    * @property {NewDate} event.newDate - Object of corrected date values
+    * @property {boolean} event.cancelable=true - By calling `event.preventDefault()` the `newDate` values will apply
+    * @example
+    * daterangepicker('#picker', {
+    *   startDate: DateTime.now(),
+    *   // allow only dates from current year
+    *   minDate: DateTime.now().startOf('year'),
+    *   manDate: DateTime.now().endOf('year'),
+    *   singleDatePicker: true,
+    *   locale: {
+    *      format: DateTime.DATETIME_SHORT
+    *   }
+    * }).addEventListener('violate', (ev) => {
+    *   ev.newDate.startDate = DateTime.now().minus({ days: 3 }).startOf('day');
+    *   ev.preventDefault();
+    * });
+    *
+    * // Try to set date outside permitted range at <input> elemet
+    * const input = document.querySelector('#picker');
+    * input.value = DateTime.now().minus({ years: 10 })).toLocaleString(DateTime.DATETIME_SHORT)
+    * input.dispatchEvent(new Event('keyup'));
+    
+    * // Try to set date outside permitted range by code
+    * const drp = getDateRangePicker('#picker');
+    * drp.setStartDate(DateTime.now().minus({ years: 10 });
+    * 
+    * // -> Calendar selects and shows "today - 3 days"
+    */
+    onViolate: { type: "violate", param: (violation, newDate) => {
+      return { ...violation, ...{ cancelable: true } };
+    } },
+    /**
+    * Emitted before the calendar time picker is rendered.
+    * @event
+    * @name "beforeRenderTimePicker"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    */
+    onBeforeRenderTimePicker: { type: "beforeRenderTimePicker" },
+    /**
+    * Emitted before the calendar is rendered.
+    * @event
+    * @name "beforeRenderCalendar"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    */
+    onBeforeRenderCalendar: { type: "beforeRenderCalendar" },
+    /**
+    * Emitted when the picker is shown 
+    * @event
+    * @name "show"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    */
+    onShow: { type: "show" },
+    /**
+    * Emitted before the picker will hide.
+    * @event
+    * @name "beforeHide"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    * @property {boolean} event.cancelable=true - Hide is canceled  by calling `event.preventDefault()`
+    */
+    onBeforeHide: { type: "beforeHide", param: { cancelable: true } },
+    /**
+    * Emitted when the picker is hidden
+    * @event
+    * @name "hide"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    */
+    onHide: { type: "hide" },
+    /**
+    * Emitted when the calendar(s) are shown.
+    * Only useful when {@link #Ranges|Ranges} are used.
+    * @event
+    * @name "showCalendar"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    */
+    onShowCalendar: { type: "showCalendar" },
+    /**
+    * Emitted when the calendar(s) are hidden. Only used when {@link #Ranges|Ranges} are used.
+    * @event
+    * @name "hideCalendar"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    */
+    onHideCalendar: { type: "hideCalendar" },
+    /**
+    * Emitted when user clicks outside the picker. Use option `onOutsideClick` to define the default action, then you may not need to handle this event.
+    * @event
+    * @name "outsideClick"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    * @property {boolean} event.cancelable=true - Call `event.preventDefault()` to prevent default behaviour.<br>
+    * Useful to define custome areas where click shall not hide the picker
+    */
+    onOutsideClick: { type: "outsideClick", param: { cancelable: true } },
+    /**
+    * Emitted when the date changed. Does not trigger when time is changed, use {@link #event_timeChange|"timeChange"} to handle it
+    * @event
+    * @name "dateChange"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    * @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;
+    } },
+    /**
+    * Emitted when the time changed. Does not trigger when date is changed
+    * @event
+    * @name "timeChange"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    * @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;
+    } },
+    /**
+    * Emitted when the `Apply` button is clicked, or when a predefined {@link #Ranges|Ranges} is clicked 
+    * @event
+    * @name "apply"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    */
+    onApply: { type: "apply" },
+    /**
+    * Emitted when the `Cancel` button is clicked
+    * @event
+    * @name "cancel"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    */
+    onCancel: { type: "cancel" },
+    /**
+    * Emitted when the date is changed through `<input>` element. Event is only triggered when date string is valid and date value has changed
+    * @event
+    * @name "inputChange"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    */
+    onInputChange: { type: "inputChange" },
+    /**
+    * Emitted after month view changed, for example by click on 'prev' or 'next'
+    * @event
+    * @name "monthViewChange"
+    * @property {DateRangePickerEvent} event - The Event object
+    * @property {DateRangePicker} event.picker - The daterangepicker object
+    * @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",
+      param: (left, right) => {
+        return {
+          left: this.leftCalendar.month.startOf("month"),
+          right: this.singleMonthView || this.singleDatePicker ? null : this.rightCalendar.month.startOf("month")
+        };
+      }
+    }
+  };
+  /**
+   * Getter for all DateRangePickerEvents
+   */
+  get events() {
+    return this.#events;
+  }
+  #outsideClickProxy = this.outsideClick.bind(this);
+  #onResizeProxy = this.move.bind(this);
+  #dropdownClickWrapper = (e) => {
+    const match = e.target.closest('[data-toggle="dropdown"]');
+    if (match && document.contains(match))
+      this.#outsideClickProxy(e);
+  };
+  #showProxy = this.show.bind(this);
+  #elementChangedProxy = this.elementChanged.bind(this);
+  #keydownProxy = this.keydown.bind(this);
+  #toggleProxy = this.toggle.bind(this);
+  /* #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>
+  * Invalid date values are handled by {@link #DateRangePicker+violate|violate} Event
+  * @param {external:DateTime|external:Date|string} startDate - startDate to be set. In case of ranges, the current `endDate` is used.
+  * @param {boolean} updateView=true - If `true`, then calendar UI is updated to new value. Otherwise only internal values are set.
+  * @returns {InputViolation} - Object of violations or `null` if no violation have been found
+  * @example 
+  * const drp = getDateRangePicker('#picker');
+  * drp.setStartDate(DateTime.now().startOf('hour'));
+  */
+  setStartDate(startDate, updateView = true) {
+    if (!this.singleDatePicker)
+      return setRange(startDate, this.#endDate, updateView);
+    const oldDate = this.#startDate;
+    let newDate = this.parseDate(startDate);
+    if (newDate.equals(oldDate))
+      return null;
+    const violations = this.validateInput([newDate, null], true);
+    if (violations != null) {
+      if (violations.newDate != null) {
+        newDate = violations.newDate.startDate;
+      } else {
+        return violations;
+      }
+    }
+    const monthChange = !this.#startDate.hasSame(newDate, "month");
+    this.#startDate = newDate;
+    this.#endDate = this.#startDate;
+    if (!this.timePicker) {
+      this.#startDate = this.#startDate.startOf("day");
+      this.#endDate = this.#endDate.endOf("day");
+    }
+    this.updateElement();
+    if (updateView)
+      this.updateView(monthChange);
+    return violations;
+  }
+  /**
+  * Sets the date range picker's currently selected start date to the provided date.<br>
+  * `endDate` must be a `luxon.DateTime` or `Date` or `string` according to {@link ISO-8601} or a string matching `locale.format`.<br>
+  * Invalid date values are handled by {@link #DateRangePicker+violate|violate} Event
+  * @param {external:DateTime|external:Date|string} endDate - endDate to be set. In case of ranges, the current `startDate` is used.
+  * @param {boolean} updateView=true - If `true`, then calendar UI is updated to new value. Otherwise only internal values are set.
+  * @returns {InputViolation} - Object of violations or `null` if no violation have been found
+  * @example 
+  * const drp = getDateRangePicker('#picker');
+  * drp.setEndDate(DateTime.now().startOf('hour'));
+  */
+  setEndDate(endDate, updateView = true) {
+    return this.singleDatePicker ? null : setRange(this.#startDate, endDate, updateView);
+  }
+  /**
+  * Sets the date range picker's currently selected start date to the provided date.<br>
+  * `startDate` and `endDate` must be a `luxon.DateTime` or `Date` or `string` according to {@link ISO-8601} or a string matching `locale.format`.<br>
+  * Invalid date values are handled by {@link #DateRangePicker+violate|violate} Event
+  * @param {external:DateTime|external:Date|string} startDate - startDate to be set
+  * @param {external:DateTime|external:Date|string} endDate - endDate to be set
+  * @param {boolean} updateView=true - If `true`, then calendar UI is updated to new value. Otherwise only internal values are set.
+  * @returns {InputViolation} - Object of violations or `null` if no violation have been found
+  * @example 
+  * const drp = getDateRangePicker('#picker');
+  * drp.setRange(DateTime.now().startOf('hour'), DateTime.now().endOf('day'));
+  */
+  setRange(startDate, endDate, updateView = true) {
+    if (this.singleDatePicker)
+      return;
+    if (!this.#endDate)
+      this.#endDate = this.#startDate;
+    const oldDate = [this.#startDate, this.#endDate];
+    let newDate = [this.parseDate(startDate), this.parseDate(endDate)];
+    if (oldDate[0].equals(newDate[0]) && oldDate[1].equals(newDate[1]) || newDate[0] > newDate[1])
+      return;
+    const violations = this.validateInput([newDate[0], newDate[1]], true);
+    if (violations != null) {
+      if (violations.newDate != null) {
+        newDate[0] = violations.newDate.startDate;
+        newDate[1] = violations.newDate.endDate;
+      } else {
+        return violations;
+      }
+    }
+    const monthChange = !this.#startDate.hasSame(newDate[0], "month") || !this.#endDate.hasSame(newDate[1], "month");
+    this.#startDate = newDate[0];
+    this.#endDate = newDate[1];
+    if (!this.timePicker) {
+      this.#startDate = this.#startDate.startOf("day");
+      this.#endDate = this.#endDate.endOf("day");
+    }
+    this.updateElement();
+    if (updateView)
+      this.updateView(monthChange);
+    return violations;
+  }
+  /**
+   * Parse date value
+   * @param {sting|external:DateTime|Date} value - The value to be parsed
+   * @returns {external:DateTime} - DateTime object
+   */
+  parseDate(value) {
+    if (typeof value === "object") {
+      if (luxon.DateTime.isDateTime(value) && value.isValid) {
+        return value;
+      } else if (value instanceof Date) {
+        return luxon.DateTime.fromJSDate(value);
+      } else {
+        throw RangeError(`Value must be a luxon.DateTime or Date or string`);
+      }
+    } else if (typeof value === "string") {
+      const format = typeof this.locale.format === "string" ? this.locale.format : luxon.DateTime.parseFormatForOpts(this.locale.format);
+      if (luxon.DateTime.fromISO(value).isValid) {
+        return luxon.DateTime.fromISO(value);
+      } else if (luxon.DateTime.fromFormat(value, format, { locale: luxon.DateTime.now().locale }).isValid) {
+        return luxon.DateTime.fromFormat(value, format, { locale: luxon.DateTime.now().locale });
+      } else {
+        const invalid = luxon.DateTime.fromFormat(value, format, { locale: luxon.DateTime.now().locale }).invalidExplanation;
+        throw RangeError(`Value is not a valid string: ${invalid}`);
+      }
+    }
+  }
+  /* #endregion */
+  /**
+   * Format a DateTime object
+   * @param {external:DateTime} date - The DateTime to format
+   * @param {object|string} format=this.locale.format - The format option
+   * @returns {string} - Formatted date string
+   */
+  formatDate(date, format = this.locale.format) {
+    if (typeof format === "object") {
+      return date.toLocaleString(format);
+    } else {
+      if (luxon.Settings.defaultLocale === null) {
+        const locale = luxon.DateTime.now().locale;
+        return date.toFormat(format, { locale });
+      } else {
+        return date.toFormat(format);
+      }
+    }
+  }
+  /**
+   * Set Duration Label to selected range (if used) and selected dates
+   * @private 
+   */
+  updateLabel() {
+    if (this.showLabel) {
+      let text = this.formatDate(this.#startDate);
+      if (!this.singleDatePicker) {
+        text += this.locale.separator;
+        if (this.#endDate)
+          text += this.formatDate(this.#endDate);
+      }
+      this.container.querySelector(".drp-selected").innerHTML = text;
+    }
+    if (this.singleDatePicker || this.locale.durationFormat == null)
+      return;
+    if (!this.#endDate) {
+      this.container.querySelector(".drp-duration-label").innerHTML = "";
+      return;
+    }
+    if (typeof this.locale.durationFormat === "function") {
+      this.container.querySelector(".drp-duration-label").innerHTML = this.locale.durationFormat(this.#startDate, this.#endDate);
+    } else {
+      let duration = this.#endDate.plus({ milliseconds: 1 }).diff(this.#startDate).rescale().set({ milliseconds: 0 });
+      if (!this.timePicker)
+        duration = duration.set({ seconds: 0, minutes: 0, hours: 0 });
+      duration = duration.removeZeros();
+      if (typeof this.locale.durationFormat === "object") {
+        this.container.querySelector(".drp-duration-label").innerHTML = duration.toHuman(this.locale.durationFormat);
+      } else {
+        this.container.querySelector(".drp-duration-label").innerHTML = duration.toFormat(this.locale.durationFormat);
+      }
+    }
+  }
+  /**
+  * @typedef InputViolation
+  * @type {Object}
+  * @typedef {object} Violation
+  * @property {string} reason - The type/reason of violation
+  * @property {external:DateTime} old - Old value startDate/endDate
+  * @property {external:DateTime} new? - Corrected value of startDate/endDate if existing
+  * @typedef {object} NewDate
+  * @property {external:DateTime} newDate.startDate- Object with corrected values
+  * @property {external:DateTime} newDate.endDate - Object with corrected values
+  * @property {Violation[]} startDate - The constraints which violates the input
+  * @property {Violation[]?} endDate - The constraints which violates the input or `null` for singleDatePicker
+  * @property {NewDate} newDate - Object with corrected values
+  */
+  /**
+  * Validate `startDate` and `endDate` against `timePickerStepSize`, `minDate`, `maxDate`, 
+  * `minSpan`, `maxSpan`, `invalidDate` and `invalidTime`.
+  * @param {Array} range - `[startDate, endDate]`<br>Range to be checked, defaults to current `startDate` and `endDate`
+  * @param {boolean} dipatch=false - If `true` then event "violate" is dispated.<br>
+  * If eventHandler returns `true`, then `null` is returned, otherwiese the object of violations.
+  * @emits "violate"
+  * @returns {InputViolation|null} - Object of violations and corrected values or `null` if no violation have been found
+  * @example 
+  * options => {
+  *   minDate: DateTime.now().minus({months: 3}).startOf('day'),
+  *   maxDate: DateTime.now().minus({day: 3}).startOf('day'),
+  *   minSpan: Duration.fromObject({days: 7}),
+  *   maxSpan: Duration.fromObject({days: 70}),
+  *   timePickerStepSize: Duration.fromObject({hours: 1})
+  * }
+  * const result = validateInput(DateTime.now(), DateTime.now().plus({day: 3}));
+  * 
+  * result => {
+  *   startDate: [
+  *     { old: "2026-03-13T10:35:52", reason: "timePickerStepSize", new: "2026-03-13T11:00:00" },
+  *     { old: "2026-03-13T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" }
+  *   ],
+  *   endDate: {
+  *     { old: "2026-03-16T10:35:52", reason: "stepSize", new: "2026-03-16T11:00:00" },
+  *     { old: "2026-03-16T11:00:00", reason: "maxDate", new: "2026-03-10T00:00:00" },
+  *     { old: "2026-03-10T00:00:00", reason: "minSpan", new: "2026-03-17T00:00:00" }
+  *   ],
+  *   newDate: { 
+  *     startDate: "2026-03-10T00:00:00", 
+  *     endDate: "2026-03-17T00:00:00"
+  *   }
+  * }
+  */
+  validateInput(range, dipatch = false) {
+    let startDate = range == null ? this.#startDate : range[0];
+    let endDate = range == null ? this.#endDate : range[1];
+    if (startDate == null)
+      return null;
+    let result = { startDate: [] };
+    let violation = { old: startDate, reason: this.timePicker ? "timePickerStepSize" : "timePicker" };
+    if (this.timePicker) {
+      const secs = this.timePickerStepSize.as("seconds");
+      startDate = luxon.DateTime.fromSeconds(secs * Math.round(startDate.toSeconds() / secs));
+      violation.new = startDate;
+      if (!violation.new.equals(violation.old))
+        result.startDate.push(violation);
+    } else {
+      startDate = startDate.startOf("day");
+    }
+    const shiftStep = this.timePicker ? this.timePickerStepSize.as("seconds") : luxon.Duration.fromObject({ days: 1 }).as("seconds");
+    if (this.minDate && startDate < this.minDate) {
+      violation = { old: startDate, reason: "minDate" };
+      startDate = startDate.plus({ seconds: Math.trunc(this.minDate.diff(startDate).as("seconds") / shiftStep) * shiftStep });
+      if (startDate < this.minDate)
+        startDate = startDate.plus(this.timePicker ? this.timePickerStepSize : { days: 1 });
+      violation.new = startDate;
+      if (!violation.new.equals(violation.old))
+        result.startDate.push(violation);
+    } else if (this.maxDate && startDate > this.maxDate) {
+      violation = { old: startDate, reason: "maxDate" };
+      startDate = startDate.minus({ seconds: Math.trunc(startDate.diff(this.maxDate).as("seconds") / shiftStep) * shiftStep });
+      if (startDate > this.maxDate)
+        startDate = startDate.minus(this.timePicker ? this.timePickerStepSize : { days: 1 });
+      violation.new = startDate;
+      if (!violation.new.equals(violation.old))
+        result.startDate.push(violation);
+    }
+    let units = ["hour"];
+    if (this.timePicker) {
+      if (this.timePickerOpts.showMinutes)
+        units.push("minute");
+      if (this.timePickerOpts.showSeconds)
+        units.push("second");
+      if (!this.timePicker24Hour)
+        units.push("ampm");
+    }
+    if (this.isInvalidDate(startDate))
+      result.startDate.push({ old: startDate, reason: "isInvalidDate" });
+    if (this.timePicker) {
+      for (let unit of units) {
+        if (this.isInvalidTime(startDate, unit, "start"))
+          result.startDate.push({ old: startDate, reason: "isInvalidTime", unit });
+      }
+    }
+    if (this.singleDatePicker) {
+      if (result.startDate.length == 0)
+        return null;
+      if (dipatch) {
+        let newValues = { startDate };
+        const event = this.triggerEvent(this.#events.onViolate, { violation: result, newDate: newValues });
+        if (event.defaultPrevented) {
+          result.newDate = event.newDate;
+          return result;
+        }
+        return result;
+      } else {
+        return result;
+      }
+    }
+    if (endDate == null)
+      return null;
+    result.endDate = [];
+    violation = { old: endDate, reason: this.timePicker ? "stepSize" : "timePicker" };
+    if (this.timePicker) {
+      const secs = this.timePickerStepSize.as("seconds");
+      endDate = luxon.DateTime.fromSeconds(secs * Math.round(endDate.toSeconds() / secs));
+      violation.new = endDate;
+      if (!violation.new.equals(violation.old))
+        result.endDate.push(violation);
+    } else {
+      endDate = endDate.endOf("day");
+    }
+    if (this.maxDate && endDate > this.maxDate) {
+      violation = { old: endDate, reason: "maxDate" };
+      endDate = endDate.minus({ seconds: Math.trunc(endDate.diff(this.maxDate).as("seconds") / shiftStep) * shiftStep });
+      if (endDate > this.maxDate)
+        endDate = endDate.minus(this.timePicker ? this.timePickerStepSize : { days: 1 });
+      violation.new = endDate;
+      if (!violation.new.equals(violation.old))
+        result.endDate.push(violation);
+    } else if (this.minDate && endDate < this.minDate) {
+      violation = { old: endDate, reason: "minDate" };
+      endDate = endDate.plus({ seconds: Math.trunc(this.minDate.diff(endDate).as("seconds") / shiftStep) * shiftStep });
+      if (endDate < this.minDate)
+        endDate = endDate.plus(this.timePicker ? this.timePickerStepSize : { days: 1 });
+      violation.new = endDate;
+      if (!violation.new.equals(violation.old))
+        result.endDate.push(violation);
+    }
+    if (this.maxSpan) {
+      const maxDate = startDate.plus(this.maxSpan);
+      if (endDate > maxDate) {
+        violation = { old: endDate, reason: "maxSpan" };
+        endDate = endDate.minus({ seconds: Math.trunc(maxDate.diff(endDate).as("seconds") / shiftStep) * shiftStep });
+        if (endDate > maxDate)
+          endDate = endDate.minus(this.timePicker ? this.timePickerStepSize : { days: 1 });
+        violation.new = endDate;
+        if (!violation.new.equals(violation.old))
+          result.endDate.push(violation);
+      }
+    }
+    if (this.minSpan) {
+      const minDate = startDate.plus(this.defaultSpan ?? this.minSpan);
+      if (endDate < minDate) {
+        violation = { old: endDate, reason: "minSpan" };
+        endDate = endDate.plus({ seconds: Math.trunc(minDate.diff(endDate).as("seconds") / shiftStep) * shiftStep });
+        if (endDate < minDate)
+          endDate = endDate.plus(this.timePicker ? this.timePickerStepSize : { days: 1 });
+        violation.new = endDate;
+        if (!violation.new.equals(violation.old))
+          result.endDate.push(violation);
+      }
+    }
+    if (this.isInvalidDate(endDate))
+      result.endDate.push({ old: endDate, reason: "isInvalidDate" });
+    if (this.timePicker) {
+      for (let unit of units) {
+        if (this.isInvalidTime(endDate, unit, "end"))
+          result.endDate.push({ old: endDate, reason: "isInvalidTime", unit });
+      }
+    }
+    if (result.startDate.length == 0 && result.endDate.length == 0)
+      return null;
+    if (dipatch) {
+      let newValues = { startDate, endDate };
+      const event = this.triggerEvent(this.#events.onViolate, { violation: result, newDate: newValues });
+      if (event.defaultPrevented) {
+        result.newDate = event.newDate;
+        return result;
+      }
+      return result;
+    } else {
+      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} 
+  * @param {boolean} monthChange - If `true` then monthView changed
+  * @emits "beforeRenderTimePicker"
+  */
+  updateView(monthChange) {
+    if (this.timePicker) {
+      this.triggerEvent(this.#events.onBeforeRenderTimePicker);
+      this.renderTimePicker("start");
+      this.renderTimePicker("end");
+      this.container.querySelector(".calendar-time.end-time select").disabled = !this.#endDate;
+      this.container.querySelector(".calendar-time.end-time select").classList.toggle("disabled", !this.#endDate);
+    }
+    this.updateLabel();
+    this.updateMonthsInView();
+    this.updateCalendars(monthChange);
+    this.setApplyBtnState();
+  }
+  /**
+  * Shows calendar months based on selected date values
+  * @private
+  */
+  updateMonthsInView() {
+    if (this.#endDate) {
+      if (!this.singleDatePicker && this.leftCalendar.month && this.rightCalendar.month && (this.#startDate.hasSame(this.leftCalendar.month, "month") || this.#startDate.hasSame(this.rightCalendar.month, "month")) && (this.#endDate.hasSame(this.leftCalendar.month, "month") || this.#endDate.hasSame(this.rightCalendar.month, "month")))
+        return;
+      this.leftCalendar.month = this.#startDate.startOf("month");
+      if (!this.singleMonthView) {
+        if (!this.linkedCalendars && !this.#endDate.hasSame(this.#startDate, "month")) {
+          this.rightCalendar.month = this.#endDate.startOf("month");
+        } else {
+          this.rightCalendar.month = this.#startDate.startOf("month").plus({ month: 1 });
+        }
+      }
+    } else {
+      if (!this.#startDate && this.initalMonth) {
+        this.leftCalendar.month = this.initalMonth;
+        if (!this.singleMonthView)
+          this.rightCalendar.month = this.initalMonth.plus({ month: 1 });
+      } else {
+        if (!this.leftCalendar.month.hasSame(this.#startDate, "month") && !this.rightCalendar.month.hasSame(this.#startDate, "month")) {
+          this.leftCalendar.month = this.#startDate.startOf("month");
+          this.rightCalendar.month = this.#startDate.startOf("month").plus({ month: 1 });
+        }
+      }
+    }
+    if (this.maxDate && this.linkedCalendars && !this.singleDatePicker && !this.singleMonthView && this.rightCalendar.month > this.maxDate) {
+      this.rightCalendar.month = this.maxDate.startOf("month");
+      this.leftCalendar.month = this.maxDate.startOf("month").minus({ month: 1 });
+    }
+  }
+  /**
+  * Updates the selected day value from calendar with selected time values
+  * @emits "beforeRenderCalendar"
+  * @emits "monthViewChange"
+  * @param {boolean} monthChange - If `true` then monthView changed
+  * @private
+  */
+  updateCalendars(monthChange) {
+    if (this.timePicker) {
+      var hour, minute, second;
+      if (this.#endDate) {
+        hour = parseInt(this.container.querySelector(".start-time .hourselect").value, 10);
+        if (isNaN(hour))
+          hour = parseInt(this.container.querySelector(".start-time .hourselect option:last-child").value, 10);
+        minute = 0;
+        if (this.timePickerOpts.showMinutes) {
+          minute = parseInt(this.container.querySelector(".start-time .minuteselect").value, 10);
+          if (isNaN(minute))
+            minute = parseInt(this.container.querySelector(".start-time .minuteselect option:last-child").value, 10);
+        }
+        second = 0;
+        if (this.timePickerOpts.showSeconds) {
+          second = parseInt(this.container.querySelector(".start-time .secondselect").value, 10);
+          if (isNaN(second))
+            second = parseInt(this.container.querySelector(".start-time .secondselect option:last-child").value, 10);
+        }
+      } else {
+        hour = parseInt(this.container.querySelector(".end-time .hourselect").value, 10);
+        if (isNaN(hour))
+          hour = parseInt(this.container.querySelector(".end-time .hourselect option:last-child").value, 10);
+        minute = 0;
+        if (this.timePickerOpts.showMinutes) {
+          minute = parseInt(this.container.querySelector(".end-time .minuteselect").value, 10);
+          if (isNaN(minute))
+            minute = parseInt(this.container.querySelector(".end-time .minuteselect option:last-child").value, 10);
+        }
+        second = 0;
+        if (this.timePickerOpts.showSeconds) {
+          second = parseInt(this.container.querySelector(".end-time .secondselect").value, 10);
+          if (isNaN(second))
+            second = parseInt(this.container.querySelector(".end-time .secondselect option:last-child").value, 10);
+        }
+      }
+      this.leftCalendar.month = this.leftCalendar.month.set({ hour, minute, second });
+      if (!this.singleMonthView)
+        this.rightCalendar.month = this.rightCalendar.month.set({ hour, minute, second });
+    } else {
+      this.leftCalendar.month = this.leftCalendar.month.set({ hour: 0, minute: 0, second: 0 });
+      if (!this.singleMonthView)
+        this.rightCalendar.month = this.rightCalendar.month.set({ hour: 0, minute: 0, second: 0 });
+    }
+    this.triggerEvent(this.#events.onBeforeRenderCalendar);
+    this.renderCalendar("left");
+    this.renderCalendar("right");
+    if (monthChange)
+      this.triggerEvent(this.#events.onMonthViewChange);
+    this.container.querySelectorAll(".ranges li").forEach((el) => {
+      el.classList.remove("active");
+    });
+    if (this.#endDate == null) return;
+    this.calculateChosenLabel();
+  }
+  /**
+  * Renders the calendar month
+  * @private
+  */
+  renderCalendar(side) {
+    if (side === "right" && this.singleMonthView)
+      return;
+    var calendar = side === "left" ? this.leftCalendar : this.rightCalendar;
+    if (calendar.month == null && !this.#startDate && this.initalMonth)
+      calendar.month = this.initalMonth.startOf("month");
+    const firstDay = calendar.month.startOf("month");
+    const lastDay = calendar.month.endOf("month").startOf("day");
+    var theDate = calendar.month.startOf("month").minus({ day: 1 });
+    const time = { hour: calendar.month.hour, minute: calendar.month.minute, second: calendar.month.second };
+    var calendar = [];
+    calendar.firstDay = firstDay;
+    calendar.lastDay = lastDay;
+    for (var i = 0; i < 6; i++)
+      calendar[i] = [];
+    while (theDate.weekday != this.locale.firstDay)
+      theDate = theDate.minus({ day: 1 });
+    for (let col = 0, row = -1; col < 42; col++, theDate = theDate.plus({ day: 1 })) {
+      if (col % 7 === 0)
+        row++;
+      calendar[row][col % 7] = theDate.set(time);
+    }
+    if (side === "left") {
+      this.leftCalendar.calendar = calendar;
+    } else {
+      this.rightCalendar.calendar = calendar;
+    }
+    var minDate = side === "left" ? this.minDate : this.#startDate;
+    var maxDate = this.maxDate;
+    var html = "<tr>";
+    if (this.showWeekNumbers || this.showISOWeekNumbers)
+      html += "<th></th>";
+    if ((!minDate || minDate < calendar.firstDay) && (!this.linkedCalendars || side === "left")) {
+      html += '<th class="prev available"><span></span></th>';
+    } else {
+      html += "<th></th>";
+    }
+    var dateHtml = `${this.locale.monthNames[calendar.firstDay.month - 1]} ${calendar.firstDay.year}`;
+    if (this.showDropdowns) {
+      const maxYear = (maxDate && maxDate.year) ?? this.maxYear;
+      const minYear = (minDate && minDate.year) ?? this.minYear;
+      let div = this.externalStyle === "bulma" ? '<div class="select is-small mr-1">' : "";
+      var monthHtml = `${div}<select class="monthselect">`;
+      for (var m = 1; m <= 12; m++) {
+        monthHtml += `<option value="${m}"${m === calendar.firstDay.month ? " selected" : ""}`;
+        if (minDate && calendar.firstDay.set({ month: m }) < minDate.startOf("month") || maxDate && calendar.firstDay.set({ month: m }) > maxDate.endOf("month"))
+          monthHtml += ` disabled`;
+        monthHtml += `>${this.locale.monthNames[m - 1]}</option>`;
+      }
+      monthHtml += "</select>";
+      if (this.externalStyle === "bulma")
+        monthHtml += "</div>";
+      div = this.externalStyle === "bulma" ? '<div class="select is-small ml-1">' : "";
+      var yearHtml = `${div}<select class="yearselect">`;
+      for (var y = minYear; y <= maxYear; y++)
+        yearHtml += `<option value="${y}"${y === calendar.firstDay.year ? " selected" : ""}>${y}</option>`;
+      yearHtml += "</select>";
+      if (this.externalStyle === "bulma")
+        yearHtml += "</div>";
+      dateHtml = monthHtml + yearHtml;
+    }
+    html += '<th colspan="5" class="month">' + dateHtml + "</th>";
+    if ((!maxDate || maxDate > calendar.lastDay.endOf("day")) && (!this.linkedCalendars || side === "right" || this.singleDatePicker || this.singleMonthView)) {
+      html += '<th class="next available"><span></span></th>';
+    } else {
+      html += "<th></th>";
+    }
+    html += "</tr>";
+    html += "<tr>";
+    if (this.showWeekNumbers || this.showISOWeekNumbers)
+      html += `<th class="week">${this.locale.weekLabel}</th>`;
+    for (let [index, dayOfWeek] of this.locale.daysOfWeek.entries()) {
+      html += "<th";
+      if (this.weekendDayClasses && this.weekendDayClasses.length && luxon.Info.getWeekendWeekdays().includes(index + 1))
+        html += ` class="${this.weekendDayClasses}"`;
+      html += `>${dayOfWeek}</th>`;
+    }
+    html += "</tr>";
+    this.container.querySelector(`.drp-calendar.${side} .calendar-table thead`).innerHTML = html;
+    html = "";
+    if (this.#endDate == null && this.maxSpan) {
+      var maxLimit = this.#startDate.plus(this.maxSpan).endOf("day");
+      if (!maxDate || maxLimit < maxDate) {
+        maxDate = maxLimit;
+      }
+    }
+    var minLimit;
+    if (this.#endDate == null && this.minSpan)
+      minLimit = this.#startDate.plus(this.minSpan).startOf("day");
+    for (let row = 0; row < 6; row++) {
+      html += "<tr>";
+      if (this.showISOWeekNumbers)
+        html += `<td class="week">${calendar[row][0].weekNumber}</td>`;
+      else if (this.showWeekNumbers)
+        html += `<td class="week">${calendar[row][0].localWeekNumber}</td>`;
+      for (let col = 0; col < 7; col++) {
+        var classes = [];
+        if (this.todayClasses && this.todayClasses.length && calendar[row][col].hasSame(luxon.DateTime.now(), "day"))
+          classes.push(this.todayClasses);
+        if (this.weekendClasses && this.weekendClasses.length && luxon.Info.getWeekendWeekdays().includes(calendar[row][col].weekday))
+          classes.push(this.weekendClasses);
+        if (calendar[row][col].month != calendar[1][1].month)
+          classes.push("off", "ends");
+        if (this.minDate && calendar[row][col].startOf("day") < this.minDate.startOf("day"))
+          classes.push("off", "disabled");
+        if (maxDate && calendar[row][col].startOf("day") > maxDate.startOf("day"))
+          classes.push("off", "disabled");
+        if (minLimit && calendar[row][col].startOf("day") > this.#startDate.startOf("day") && calendar[row][col].startOf("day") < minLimit.startOf("day"))
+          classes.push("off", "disabled");
+        if (this.isInvalidDate(calendar[row][col]))
+          classes.push("off", "disabled");
+        if (this.#startDate != null && calendar[row][col].hasSame(this.#startDate, "day"))
+          classes.push("active", "start-date");
+        if (this.#endDate != null && calendar[row][col].hasSame(this.#endDate, "day"))
+          classes.push("active", "end-date");
+        if (this.#endDate != null && calendar[row][col] > this.#startDate && calendar[row][col] < this.#endDate)
+          classes.push("in-range");
+        var isCustom = this.isCustomDate(calendar[row][col]);
+        if (isCustom !== false)
+          typeof isCustom === "string" ? classes.push(isCustom) : classes.push(...isCustom);
+        if (!classes.includes("disabled"))
+          classes.push("available");
+        html += `<td class="${classes.join(" ")}" data-title="r${row}c${col}">${calendar[row][col].day}</td>`;
+      }
+      html += "</tr>";
+    }
+    this.container.querySelector(`.drp-calendar.${side} .calendar-table tbody`).innerHTML = html;
+  }
+  /**
+  * Renders the time pickers
+  * @private
+  * @emits "beforeRenderTimePicker"
+  */
+  renderTimePicker(side) {
+    if (side === "end" && !this.#endDate) return;
+    var selected, minLimit, minDate, maxDate = this.maxDate;
+    let html = "";
+    if (this.showWeekNumbers || this.showISOWeekNumbers)
+      html += "<th></th>";
+    if (this.maxSpan && (!this.maxDate || this.#startDate.plus(this.maxSpan) < this.maxDate))
+      maxDate = this.#startDate.plus(this.maxSpan);
+    if (this.minSpan && side === "end")
+      minLimit = this.#startDate.plus(this.defaultSpan ?? this.minSpan);
+    if (side === "start") {
+      selected = this.#startDate;
+      minDate = this.minDate;
+    } else if (side === "end") {
+      selected = this.#endDate;
+      minDate = this.#startDate;
+      let timeSelector = this.container.querySelector(".drp-calendar .calendar-time.end-time");
+      if (timeSelector.innerHTML != "") {
+        selected = selected.set({
+          hour: !isNaN(selected.hour) ? selected.hour : timeSelector.querySelector(".hourselect option:selected").value,
+          minute: !isNaN(selected.minute) ? selected.minute : timeSelector.querySelector(".minuteselect option:selected").value,
+          second: !isNaN(selected.second) ? selected.second : timeSelector.querySelector(".secondselect option:selected").value
+        });
+      }
+      if (selected < this.#startDate)
+        selected = this.#startDate;
+      if (maxDate && selected > maxDate)
+        selected = maxDate;
+    }
+    html += `<th colspan="7">`;
+    if (this.externalStyle === "bulma")
+      html += '<div class="select is-small mx-1">';
+    html += '<select class="hourselect">';
+    const ampm = selected.toFormat("a", { locale: "en-US" });
+    let start = 0;
+    if (!this.timePicker24Hour)
+      start = ampm === "AM" ? 1 : 13;
+    for (var i = start; i <= start + 23; i += this.timePickerOpts.hourStep) {
+      let time = selected.set({ hour: i % 24 });
+      let disabled = false;
+      if (minDate && time.set({ minute: 59 }) < minDate)
+        disabled = true;
+      if (maxDate && time.set({ minute: 0 }) > maxDate)
+        disabled = true;
+      if (minLimit && time.endOf("hour") < minLimit)
+        disabled = true;
+      if (!disabled && this.isInvalidTime(time, this.singleDatePicker ? null : side, "hour"))
+        disabled = true;
+      if (this.timePicker24Hour) {
+        if (!disabled && i == selected.hour) {
+          html += `<option value="${i}" selected>${i}</option>`;
+        } else if (disabled) {
+          html += `<option value="${i}" disabled class="disabled">${i}</option>`;
+        } else {
+          html += `<option value="${i}">${i}</option>`;
+        }
+      } else {
+        const i_12 = luxon.DateTime.fromFormat(`${i % 24}`, "H").toFormat("h");
+        const i_ampm = luxon.DateTime.fromFormat(`${i % 24}`, "H").toFormat("a", { locale: "en-US" });
+        if (ampm == i_ampm) {
+          if (!disabled && i == selected.hour) {
+            html += `<option ampm="${i_ampm}" value="${i % 24}" selected>${i_12}</option>`;
+          } else if (disabled) {
+            html += `<option  ampm="${i_ampm}" value="${i % 24}" disabled class="disabled">${i_12}</option>`;
+          } else {
+            html += `<option ampm="${i_ampm}" value="${i % 24}">${i_12}</option>`;
+          }
+        } else {
+          html += `<option ampm="${i_ampm}" hidden="hidden" value="${i % 24}">${i_12}</option>`;
+        }
+      }
+    }
+    html += "</select>";
+    if (this.externalStyle === "bulma")
+      html += "</div>";
+    if (this.timePickerOpts.showMinutes) {
+      html += " : ";
+      if (this.externalStyle === "bulma")
+        html += '<div class="select is-small mx-1">';
+      html += '<select class="minuteselect">';
+      for (var i = 0; i < 60; i += this.timePickerOpts.minuteStep) {
+        var padded = i < 10 ? "0" + i : i;
+        let time = selected.set({ minute: i });
+        let disabled = false;
+        if (minDate && time.set({ second: 59 }) < minDate)
+          disabled = true;
+        if (maxDate && time.set({ second: 0 }) > maxDate)
+          disabled = true;
+        if (minLimit && time.endOf("minute") < minLimit)
+          disabled = true;
+        if (!disabled && this.isInvalidTime(time, this.singleDatePicker ? null : side, "minute"))
+          disabled = true;
+        if (selected.minute == i && !disabled) {
+          html += `<option value="${i}" selected>${padded}</option>`;
+        } else if (disabled) {
+          html += `<option value="${i}" disabled class="disabled">${padded}</option>`;
+        } else {
+          html += `<option value="${i}">${padded}</option>`;
+        }
+      }
+      html += "</select>";
+      if (this.externalStyle === "bulma")
+        html += "</div>";
+    }
+    if (this.timePickerOpts.showSeconds) {
+      html += " : ";
+      if (this.externalStyle === "bulma")
+        html += '<div class="select is-small mx-1">';
+      html += '<select class="secondselect">';
+      for (var i = 0; i < 60; i += this.timePickerOpts.secondStep) {
+        var padded = i < 10 ? "0" + i : i;
+        let time = selected.set({ second: i });
+        let disabled = false;
+        if (minDate && time < minDate)
+          disabled = true;
+        if (maxDate && time > maxDate)
+          disabled = true;
+        if (minLimit && time < minLimit)
+          disabled = true;
+        if (!disabled && this.isInvalidTime(time, this.singleDatePicker ? null : side, "second"))
+          disabled = true;
+        if (selected.second == i && !disabled) {
+          html += `<option value="${i}" selected>${padded}</option>`;
+        } else if (disabled) {
+          html += `<option value="${i}" disabled class="disabled">${padded}</option>`;
+        } else {
+          html += `<option value="${i}">${padded}</option>`;
+        }
+      }
+      html += "</select>";
+      if (this.externalStyle === "bulma")
+        html += "</div>";
+    }
+    if (!this.timePicker24Hour) {
+      if (this.externalStyle === "bulma")
+        html += '<div class="select is-small mx-1">';
+      html += '<select class="ampmselect">';
+      var am_html = "";
+      var pm_html = "";
+      let disabled = false;
+      if (minDate && selected.startOf("day") < minDate)
+        disabled = true;
+      if (maxDate && selected.endOf("day") > maxDate)
+        disabled = true;
+      if (minLimit && selected.startOf("day") < minLimit)
+        disabled = true;
+      if (disabled) {
+        am_html = ' disabled class="disabled "';
+        pm_html = ' disabled class="disabled"';
+      } else {
+        if (this.isInvalidTime(selected, this.singleDatePicker ? null : side, "ampm")) {
+          if (selected.toFormat("a", { locale: "en-US" }) === "AM") {
+            pm_html = ' disabled class="disabled"';
+          } else {
+            am_html = ' disabled class="disabled"';
+          }
+        }
+      }
+      html += `<option value="AM"${am_html}`;
+      if (selected.toFormat("a", { locale: "en-US" }) === "AM")
+        html += " selected";
+      html += `>${luxon.Info.meridiems()[0]}</option><option value="PM"${pm_html}`;
+      if (selected.toFormat("a", { locale: "en-US" }) === "PM")
+        html += " selected";
+      html += `>${luxon.Info.meridiems()[1]}</option>`;
+      html += "</select>";
+      if (this.externalStyle === "bulma")
+        html += "</div>";
+    }
+    html += "</div></th>";
+    this.container.querySelector(`.drp-calendar .calendar-time.${side}-time`).innerHTML = html;
+  }
+  /**
+  * Disable the `Apply` button if no date value is selected
+  * @private
+  */
+  setApplyBtnState() {
+    const state = this.singleDatePicker || this.#endDate && this.#startDate <= this.#endDate;
+    this.container.querySelector("button.applyBtn").disabled = !state;
+  }
+  /* #endregion */
+  /* #region Move/Show/Hide */
+  /**
+  * Place the picker at the right place in the document
+  */
+  move() {
+    let parentOffset = { top: 0, left: 0 };
+    let containerTop;
+    let containerLeft;
+    let drops = this.drops;
+    let parentRightEdge = window.innerWidth;
+    if (!this.parentEl.matches("body")) {
+      parentOffset = {
+        top: offset(this.parentEl).top - this.parentEl.scrollTop(),
+        left: offset(this.parentEl).left - this.parentEl.scrollLeft()
+      };
+      parentRightEdge = this.parentEl[0].clientWidth + offset(this.parentEl).left;
+    }
+    switch (this.drops) {
+      case "auto":
+        containerTop = offset(this.element).top + outerHeight(this.element) - parentOffset.top;
+        if (containerTop + outerHeight(this.container) >= this.parentEl.scrollHeight) {
+          containerTop = offset(this.element).top - outerHeight(this.container) - parentOffset.top;
+          drops = "up";
+        }
+        break;
+      case "up":
+        containerTop = offset(this.element).top - outerHeight(this.container) - parentOffset.top;
+        break;
+      case "down":
+        containerTop = offset(this.element).top + outerHeight(this.element) - parentOffset.top;
+        break;
+      default:
+        console.error(`Option drops '${drops}' not defined`);
+        break;
+    }
+    for (const [key2, value] of Object.entries({ top: 0, left: 0, right: "auto" }))
+      this.container.style[key2] = typeof value === "number" && value > 0 ? `${value}px` : value;
+    const containerWidth = outerWidth(this.container);
+    this.container.classList.toggle("drop-up", drops === "up");
+    switch (this.opens) {
+      case "left":
+        const containerRight = parentRightEdge - offset(this.element).left - outerWidth(this.element);
+        if (containerWidth + containerRight > window.innerWidth) {
+          for (const [key2, value] of Object.entries({ top: containerTop, right: "auto", left: 9 }))
+            this.container.style[key2] = typeof value === "number" && value > 0 ? `${value}px` : value;
+        } else {
+          for (const [key2, value] of Object.entries({ top: containerTop, right: containerRight, left: "auto" }))
+            this.container.style[key2] = typeof value === "number" && value > 0 ? `${value}px` : value;
+        }
+        break;
+      case "center":
+        containerLeft = offset(this.element).left - parentOffset.left + outerWidth(this.element) / 2 - containerWidth / 2;
+        if (containerLeft < 0) {
+          for (const [key2, value] of Object.entries({ top: containerTop, right: "auto", left: 9 }))
+            this.container.style[key2] = typeof value === "number" && value > 0 ? `${value}px` : value;
+        } else if (containerLeft + containerWidth > window.innerWidth) {
+          for (const [key2, value] of Object.entries({ top: containerTop, left: "auto", right: 0 }))
+            this.container.style[key2] = typeof value === "number" && value > 0 ? `${value}px` : value;
+        } else {
+          for (const [key2, value] of Object.entries({ top: containerTop, left: containerLeft, right: "auto" }))
+            this.container.style[key2] = typeof value === "number" && value > 0 ? `${value}px` : value;
+        }
+        break;
+      case "right":
+        containerLeft = offset(this.element).left - parentOffset.left;
+        if (containerLeft + containerWidth > window.innerWidth) {
+          for (const [key2, value] of Object.entries({ top: containerTop, left: "auto", right: 0 }))
+            this.container.style[key2] = typeof value === "number" && value > 0 ? `${value}px` : value;
+        } else {
+          for (const [key2, value] of Object.entries({ top: `${containerTop}px`, left: containerLeft, right: "auto" }))
+            this.container.style[key2] = typeof value === "number" && value > 0 ? `${value}px` : value;
+        }
+        break;
+      default:
+        console.error(`Option opens '${this.opens}' not defined`);
+        break;
+    }
+  }
+  /**
+  * Shows the picker
+  * @emits "show"
+  */
+  show() {
+    if (this.isShowing) return;
+    document.addEventListener("mousedown", this.#outsideClickProxy);
+    document.addEventListener("touchend", this.#outsideClickProxy);
+    document.addEventListener("click", this.#dropdownClickWrapper);
+    document.addEventListener("focusin", this.#outsideClickProxy);
+    window.addEventListener("resize", this.#onResizeProxy);
+    this.oldStartDate = this.#startDate;
+    this.oldEndDate = this.#endDate;
+    this.updateView(false);
+    this.container.style.display = "block";
+    this.move();
+    this.triggerEvent(this.#events.onShow);
+    this.isShowing = true;
+  }
+  /**
+  * Hides the picker
+  * @emits "beforeHide"
+  * @emits "hide"
+  */
+  hide() {
+    if (!this.isShowing) return;
+    if (!this.#endDate) {
+      this.#startDate = this.oldStartDate;
+      this.#endDate = this.oldEndDate;
+    }
+    if (!this.#startDate.equals(this.oldStartDate) || !this.#endDate.equals(this.oldEndDate))
+      this.callback(this.startDate, this.endDate, this.chosenLabel);
+    this.updateElement();
+    const event = this.triggerEvent(this.#events.onBeforeHide);
+    if (event.defaultPrevented)
+      return;
+    document.removeEventListener("mousedown", this.#outsideClickProxy);
+    document.removeEventListener("touchend", this.#outsideClickProxy);
+    document.removeEventListener("focusin", this.#outsideClickProxy);
+    document.removeEventListener("click", this.#dropdownClickWrapper);
+    window.removeEventListener("resize", this.#onResizeProxy);
+    this.container.style.display = "none";
+    this.triggerEvent(this.#events.onHide);
+    this.isShowing = false;
+  }
+  /**
+  * Toggles visibility of the picker
+  */
+  toggle() {
+    if (this.isShowing) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  /**
+  * Shows calendar when user selects "Custom Ranges"
+  * @emits "showCalendar"
+  */
+  showCalendars() {
+    this.container.classList.add("show-calendar");
+    this.move();
+    this.triggerEvent(this.#events.onShowCalendar);
+  }
+  /**
+  * Hides calendar when user selects a predefined range
+  * @emits "hideCalendar"
+  */
+  hideCalendars() {
+    this.container.classList.remove("show-calendar");
+    this.triggerEvent(this.#events.onHideCalendar);
+  }
+  /* #endregion */
+  /* #region Handle mouse related events */
+  /**
+  * Closes the picker when user clicks outside
+  * @param {external:Event} e - The Event target
+  * @emits "outsideClick"
+  * @private
+  */
+  outsideClick(e) {
+    const target = e.target;
+    function closest2(el, selector) {
+      let parent = el.parentElement;
+      while (parent) {
+        if (parent == selector)
+          return parent;
+        parent = parent.parentElement;
+      }
+      return null;
+    }
+    if (
+      // ie modal dialog fix
+      e.type === "focusin" || closest2(target, this.element) || closest2(target, this.container) || target.closest(".calendar-table")
+    ) return;
+    const event = this.triggerEvent(this.#events.onOutsideClick);
+    if (event.defaultPrevented)
+      return;
+    if (this.onOutsideClick === "cancel") {
+      this.#startDate = this.oldStartDate;
+      this.#endDate = this.oldEndDate;
+    }
+    this.hide();
+  }
+  /**
+  * Move calendar to previous month
+  * @param {external:Event} e - The Event target
+  * @private
+  */
+  clickPrev(e) {
+    let cal = e.target.closest(".drp-calendar");
+    if (cal.classList.contains("left")) {
+      this.leftCalendar.month = this.leftCalendar.month.minus({ month: 1 });
+      if (this.linkedCalendars && !this.singleMonthView)
+        this.rightCalendar.month = this.rightCalendar.month.minus({ month: 1 });
+    } else {
+      this.rightCalendar.month = this.rightCalendar.month.minus({ month: 1 });
+    }
+    this.updateCalendars(true);
+  }
+  /**
+  * Move calendar to next month
+  * @param {external:Event} e - The Event target
+  * @private
+  */
+  clickNext(e) {
+    let cal = e.target.closest(".drp-calendar");
+    if (cal.classList.contains("left")) {
+      this.leftCalendar.month = this.leftCalendar.month.plus({ month: 1 });
+    } else {
+      this.rightCalendar.month = this.rightCalendar.month.plus({ month: 1 });
+      if (this.linkedCalendars)
+        this.leftCalendar.month = this.leftCalendar.month.plus({ month: 1 });
+    }
+    this.updateCalendars(true);
+  }
+  /**
+  * User hovers over date values
+  * @param {external:Event} e - The Event target
+  * @private
+  */
+  hoverDate(e) {
+    if (!e.target.classList.contains("available")) return;
+    let title = e.target.dataset.title;
+    const row = title.substring(1, 2);
+    const col = title.substring(3, 4);
+    const cal = e.target(closest, ".drp-calendar");
+    var date = cal.classList.contains("left") ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];
+    const leftCalendar = this.leftCalendar;
+    const rightCalendar = this.rightCalendar;
+    const startDate = this.#startDate;
+    const initalMonth = this.initalMonth;
+    if (!this.#endDate) {
+      this.container.querySelectorAll(".drp-calendar tbody td").forEach((el) => {
+        if (el.classList.contains("week")) return;
+        const title2 = el.dataset.title;
+        const row2 = title2.substring(1, 2);
+        const col2 = title2.substring(3, 4);
+        const cal2 = el.closest(".drp-calendar");
+        const dt = cal2.classList.contains("left") ? leftCalendar.calendar[row2][col2] : rightCalendar.calendar[row2][col2];
+        if (!startDate && initalMonth) {
+          el.classList.remove("in-range");
+        } else {
+          el.classList.toggle("in-range", dt > startDate && dt < date || dt.hasSame(date, "day"));
+        }
+      });
+    }
+  }
+  /**
+  * User hovers over ranges
+  * @param {external:Event} e - The Event target
+  * @private
+  */
+  hoverRange(e) {
+    const label = e.target.dataset.rangeKey;
+    const previousDates = [this.#startDate, this.#endDate];
+    const dates = this.ranges[label] ?? [this.#startDate, this.#endDate];
+    const leftCalendar = this.leftCalendar;
+    const rightCalendar = this.rightCalendar;
+    this.container.querySelectorAll(".drp-calendar tbody td").forEach((el) => {
+      if (el.classList.contains("week")) return;
+      const title = el.dataset.ttitle;
+      const row = title.substring(1, 2);
+      const col = title.substring(3, 4);
+      const cal = el.closest(".drp-calendar");
+      const dt = cal.classList.contains("left") ? leftCalendar.calendar[row][col] : rightCalendar.calendar[row][col];
+      el.classList.toggle("start-hover", dt.hasSame(dates[0], "day"));
+      el.classList.toggle("start-date", dt.hasSame(previousDates[0], "day"));
+      el.classList.toggle("end-hover", dt.hasSame(dates[1], "day"));
+      el.classList.toggle("end-date", previousDates[1] != null && dt.hasSame(previousDates[1], "day"));
+      el.classList.toggle("range-hover", dt.startOf("day") >= dates[0].startOf("day") && dt.startOf("day") <= dates[1].startOf("day"));
+      el.classList.toggle("in-range", dt.startOf("day") >= previousDates[0].startOf("day") && previousDates[1] != null && dt.startOf("day") <= previousDates[1].startOf("day"));
+    });
+  }
+  /**
+  * User leave ranges, remove hightlight from dates
+  * @private
+  */
+  leaveRange() {
+    this.container.querySelectorAll(".drp-calendar tbody td").forEach((el) => {
+      if (el.classList.contains("week")) return;
+      el.classList.remove("start-hover");
+      el.classList.remove("end-hover");
+      el.classList.remove("range-hover");
+    });
+  }
+  /* #endregion */
+  /* #region Select values by Mouse  */
+  /**
+  * Set date values after user selected a date
+  * @param {external:Event} e - The Event target
+  * @private
+  */
+  clickRange(e) {
+    let label = e.target.getAttribute("data-range-key");
+    this.chosenLabel = label;
+    if (label == this.locale.customRangeLabel) {
+      this.showCalendars();
+    } else {
+      let newDate = this.ranges[label];
+      const monthChange = !this.#startDate.hasSame(newDate[0], "month") || !this.#endDate.hasSame(newDate[1], "month");
+      this.#startDate = newDate[0];
+      this.#endDate = newDate[1];
+      if (!this.timePicker) {
+        this.#startDate.startOf("day");
+        this.#endDate.endOf("day");
+      }
+      if (!this.alwaysShowCalendars)
+        this.hideCalendars();
+      const event = this.triggerEvent(this.#events.onBeforeHide);
+      if (event.defaultPrevented)
+        this.updateView(monthChange);
+      this.clickApply();
+    }
+  }
+  /**
+  * User clicked a date
+  * @param {external:Event} e - The Event target
+  * @emits "dateChange"
+  * @private
+  */
+  clickDate(e) {
+    if (!e.target.classList.contains("available")) return;
+    let title = e.target.dataset.title;
+    let row = title.substring(1, 2);
+    let col = title.substring(3, 4);
+    let cal = e.target.closest(".drp-calendar");
+    let date = cal.classList.contains("left") ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];
+    let side;
+    if (this.#endDate || !this.#startDate || date < this.#startDate.startOf("day")) {
+      if (this.timePicker) {
+        let hour = parseInt(this.container.querySelector(".start-time .hourselect").value, 10);
+        if (isNaN(hour))
+          hour = parseInt(this.container.querySelector(".start-time .hourselect option:last-child").value, 10);
+        let minute = 0;
+        if (this.timePickerOpts.showMinutes) {
+          minute = parseInt(this.container.querySelector(".start-time .minuteselect").value, 10);
+          if (isNaN(minute))
+            minute = parseInt(this.container.querySelector(".start-time .minuteselect option:last-child").value, 10);
+        }
+        let second = 0;
+        if (this.timePickerOpts.showSeconds) {
+          second = parseInt(this.container.querySelector(".start-time .secondselect").value, 10);
+          if (isNaN(second))
+            second = parseInt(this.container.querySelector(".start-time .secondselect option:last-child").value, 10);
+        }
+        date = date.set({ hour, minute, second });
+      } else {
+        date = date.startOf("day");
+      }
+      this.#endDate = null;
+      this.#startDate = date;
+      side = "start";
+    } else if (!this.#endDate && date < this.#startDate) {
+      this.#endDate = this.#startDate;
+      side = "end";
+    } else {
+      if (this.timePicker) {
+        let hour = parseInt(this.container.querySelector(".end-time .hourselect").value, 10);
+        if (isNaN(hour))
+          hour = parseInt(this.container.querySelector(".end-time .hourselect option:last-child").value, 10);
+        let minute = 0;
+        if (this.timePickerOpts.showMinutes) {
+          minute = parseInt(this.container.querySelector(".end-time .minuteselect").value, 10);
+          if (isNaN(minute))
+            minute = parseInt(this.container.querySelector(".end-time .minuteselect option:last-child").value, 10);
+        }
+        let second = 0;
+        if (this.timePickerOpts.showSeconds) {
+          second = parseInt(this.container.querySelector(".end-time .secondselect").value, 10);
+          if (isNaN(second))
+            second = parseInt(this.container.querySelector(".end-time .secondselect option:last-child").value, 10);
+        }
+        date = date.set({ hour, minute, second });
+      } else {
+        date = date.endOf("day");
+      }
+      this.#endDate = date;
+      if (this.autoApply) {
+        this.calculateChosenLabel();
+        this.clickApply();
+      }
+      side = "end";
+    }
+    if (this.singleDatePicker) {
+      this.#endDate = this.#startDate;
+      if (!this.timePicker && this.autoApply)
+        this.clickApply();
+      side = null;
+    }
+    this.updateView(false);
+    e.stopPropagation();
+    if (this.autoUpdateInput)
+      this.updateElement();
+    this.triggerEvent(this.#events.onDateChange, { side });
+  }
+  /**
+  * Hightlight selected predefined range in calendar
+  * @private
+  */
+  calculateChosenLabel() {
+    if (Object.keys(this.ranges).length === 0)
+      return;
+    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";
+      }
+    }
+    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 range = this.container.querySelector(`.ranges li[data-range-key="${key2}"]`);
+        this.chosenLabel = key2;
+        range.classList.add("active");
+        break;
+      }
+    }
+    if (customRange) {
+      if (this.showCustomRangeLabel) {
+        const range = this.container.querySelector(".ranges li:last-child");
+        this.chosenLabel = range.dataset.rangeKey;
+        range.classList.add("active");
+      } else {
+        this.chosenLabel = null;
+      }
+      this.showCalendars();
+    }
+  }
+  /**
+  * User clicked a time
+  * @param {external:Event} e - The Event target
+  * @emits "timeChange"
+  * @private
+  */
+  timeChanged(e) {
+    const time = e.target.closest(".calendar-time");
+    const side = time.classList.contains("start-time") ? "start" : "end";
+    var hour = parseInt(time.querySelector(".hourselect").value, 10);
+    if (isNaN(hour))
+      hour = parseInt(time.querySelector(".hourselect option:last-child").value, 10);
+    if (!this.timePicker24Hour) {
+      const ampm = time.querySelector(".ampmselect").value;
+      if (ampm == null)
+        time.querySelector(".ampmselect option:last-child").value;
+      if (ampm != luxon.DateTime.fromFormat(`${hour}`, "H").toFormat("a", { locale: "en-US" })) {
+        time.querySelectorAll(".hourselect > option").forEach((el) => {
+          el.hidden = !el.hidden;
+        });
+        const h = luxon.DateTime.fromFormat(`${hour}`, "H").toFormat("h");
+        hour = luxon.DateTime.fromFormat(`${h}${ampm}`, "ha", { locale: "en-US" }).hour;
+      }
+    }
+    var minute = 0;
+    if (this.timePickerOpts.showMinutes) {
+      minute = parseInt(time.querySelector(".minuteselect").value, 10);
+      if (isNaN(minute))
+        minute = parseInt(time.querySelector(".minuteselect option:last-child").value, 10);
+    }
+    var second = 0;
+    if (this.timePickerOpts.showSeconds) {
+      second = parseInt(time.querySelector(".secondselect").value, 10);
+      if (isNaN(second))
+        second = parseInt(time.querySelector(".secondselect option:last-child").value, 10);
+    }
+    if (side === "start") {
+      if (this.#startDate)
+        this.#startDate = this.#startDate.set({ hour, minute, second });
+      if (this.singleDatePicker) {
+        this.#endDate = this.#startDate;
+      } else if (this.#endDate && this.#endDate.hasSame(this.#startDate, "day") && this.#endDate < this.#startDate) {
+        this.#endDate = this.#startDate;
+      }
+    } else if (this.#endDate) {
+      this.#endDate = this.#endDate.set({ hour, minute, second });
+    }
+    this.updateCalendars(false);
+    this.setApplyBtnState();
+    this.triggerEvent(this.#events.onBeforeRenderTimePicker);
+    this.renderTimePicker("start");
+    this.renderTimePicker("end");
+    if (this.autoUpdateInput)
+      this.updateElement();
+    this.triggerEvent(this.#events.onTimeChange, { side: this.singleDatePicker ? null : side });
+  }
+  /**
+  * Calender month moved
+  * @param {external:Event} e - The Event target
+  * @private
+  */
+  monthOrYearChanged(e) {
+    const isLeft = e.target.closest(".drp-calendar").classList.contains("left");
+    const leftOrRight = isLeft ? "left" : "right";
+    const cal = this.container.querySelector(`.drp-calendar.${leftOrRight}`);
+    let month = parseInt(cal.querySelector(".monthselect").value, 10);
+    let year = cal.querySelector(".yearselect").value;
+    let monthChange = false;
+    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) {
+      monthChange = !luxon.DateTime.fromObject({ year, month }).hasSame(this.leftCalendar.month, "month");
+      this.leftCalendar.month = this.leftCalendar.month.set({ year, month });
+      if (this.linkedCalendars)
+        this.rightCalendar.month = this.leftCalendar.month.plus({ month: 1 });
+    } else {
+      monthChange = !luxon.DateTime.fromObject({ year, month }).hasSame(this.leftCalendar.month, "month");
+      this.rightCalendar.month = this.rightCalendar.month.set({ year, month });
+      if (this.linkedCalendars)
+        this.leftCalendar.month = this.rightCalendar.month.minus({ month: 1 });
+    }
+    this.updateCalendars(monthChange);
+  }
+  /**
+  * User clicked `Apply` button
+  * @emits "apply"
+  * @private
+     */
+  clickApply() {
+    this.hide();
+    this.triggerEvent(this.#events.onApply);
+  }
+  /**
+  * User clicked `Cancel` button
+  * @emits "cancel"
+  * @private
+  */
+  clickCancel() {
+    this.#startDate = this.oldStartDate;
+    this.#endDate = this.oldEndDate;
+    this.hide();
+    this.triggerEvent(this.#events.onCancel);
+  }
+  /* #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 `violate` Event
+  * @emits "inputChange"
+  * @private
+  */
+  elementChanged() {
+    if (!this.isInputText) return;
+    if (!this.element.value.length) return;
+    const format = typeof this.locale.format === "string" ? this.locale.format : luxon.DateTime.parseFormatForOpts(this.locale.format);
+    const dateString = this.element.value.split(this.locale.separator);
+    let monthChange = false;
+    if (this.singleDatePicker) {
+      let newDate = luxon.DateTime.fromFormat(this.element.value, format, { locale: luxon.DateTime.now().locale });
+      const oldDate = this.#startDate;
+      if (!newDate.isValid || oldDate.equals(newDate))
+        return;
+      const violations = this.validateInput([newDate, null], true);
+      if (violations != null) {
+        if (violations.newDate != null) {
+          newDate = violations.newDate.startDate;
+        } else {
+          return;
+        }
+      }
+      monthChange = !this.#startDate.hasSame(newDate, "month");
+      this.#startDate = newDate;
+      this.#endDate = this.#startDate;
+      if (!this.timePicker) {
+        this.#startDate = this.#startDate.startOf("day");
+        this.#endDate = this.#endDate.endOf("day");
+      }
+    } else if (!this.singleDatePicker && dateString.length === 2) {
+      const newDate = [0, 1].map((i) => luxon.DateTime.fromFormat(dateString[i], format, { locale: luxon.DateTime.now().locale }));
+      const oldDate = [this.#startDate, this.#endDate];
+      if (!newDate[0].isValid || !newDate[1].isValid || (oldDate[0].equals(newDate[0]) && oldDate[1].equals(newDate[1]) || newDate[0] > newDate[1]))
+        return;
+      const violations = this.validateInput([newDate[0], newDate[1]], true);
+      if (violations != null) {
+        if (violations.newDate != null) {
+          newDate[0] = violations.newDate.startDate;
+          newDate[1] = violations.newDate.endDate;
+        } else {
+          return;
+        }
+      }
+      monthChange = !this.#startDate.hasSame(newDate[0], "month") || !this.#endDate.hasSame(newDate[1], "month");
+      this.#startDate = newDate[0];
+      this.#endDate = newDate[1];
+      if (!this.timePicker) {
+        this.#startDate = this.#startDate.startOf("day");
+        this.#endDate = this.#endDate.endOf("day");
+      }
+    } else {
+      return;
+    }
+    this.updateView(monthChange);
+    this.updateElement();
+    this.triggerEvent(this.#events.onInputChange);
+  }
+  /**
+  * Handles key press, IE 11 compatibility
+  * @param {external:Event} e - The Event target
+  * @private
+  */
+  keydown(e) {
+    if ([9, 11].includes(e.keyCode))
+      this.hide();
+    if (e.keyCode === 27) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.hide();
+    }
+  }
+  /**
+  * Update attached `<input>` element with selected value
+  * @emits external:change
+  */
+  updateElement() {
+    if (this.#startDate == null && this.initalMonth)
+      return;
+    if (this.isInputText) {
+      let newValue = this.formatDate(this.#startDate);
+      if (!this.singleDatePicker) {
+        newValue += this.locale.separator;
+        if (this.#endDate)
+          newValue += this.formatDate(this.#endDate);
+      }
+      this.updateAltInput();
+      if (newValue !== this.element.value) {
+        this.element.value = newValue;
+        this.element.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    } else {
+      this.updateAltInput();
+    }
+  }
+  /**
+  * Update altInput `<input>` element with selected value
+  */
+  updateAltInput() {
+    if (this.altInput == null)
+      return;
+    if (this.altFormat == null) {
+      let precision = "day";
+      if (this.timePicker) {
+        if (this.timePickerOpts.showSeconds) {
+          precision = "second";
+        } else if (this.timePickerOpts.showMinutes) {
+          precision = "minute";
+        } else {
+          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;
+      }
+    } 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;
+      }
+    }
+  }
+  /**
+  * Removes the picker from document
+  */
+  remove() {
+    this.element.removeEventListener("click", this.#showProxy);
+    this.element.removeEventListener("focus", this.#showProxy);
+    this.element.removeEventListener("keyup", this.#elementChangedProxy);
+    this.element.removeEventListener("keydown", this.#keydownProxy);
+    this.element.removeEventListener("click", this.#toggleProxy);
+    this.element.removeEventListener("keydown", this.#toggleProxy);
+    this.container.remove();
+  }
+  /**
+   * Helper function to dispatch events
+   * @param {object} ev - Event template from this.#events
+   * @param  {...object} args - Additional parameters if needed
+   */
+  triggerEvent(ev, ...args) {
+    if (args.length === 0) {
+      const event = new DateRangePickerEvent(this, ev);
+      this.element.dispatchEvent(event);
+      return event;
+    } else {
+      const event = new DateRangePickerEvent(this, ev, ...args);
+      this.element.dispatchEvent(event);
+      return event;
+    }
+  }
+  /**
+   * Helper function to add eventListener similar to jQuery .on( events [, selector ] [, data ] )
+   * @param {string} element - Query selector of element where listener is added
+   * @param {string} eventName - Name of the event
+   * @param {string} selector - Query selector string to filter the descendants of the element
+   * @param {function} delegate - Handler data
+   * @private
+   */
+  addListener(element, eventName, selector, delegate) {
+    this.container.querySelectorAll(element).forEach((el) => {
+      el.addEventListener(eventName, function(event) {
+        const target = event.target.closest(selector);
+        if (target && el.contains(target))
+          delegate.call(target, event);
+      });
+    });
+  }
+}
+function createElementFromHTML(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html.trim();
+  return template.content.firstElementChild;
+}
+class DateRangePickerEvent extends Event {
+  #picker;
+  constructor(drp, ev, args = {}) {
+    let param = {};
+    if (ev.param)
+      param = typeof ev.param === "function" ? ev.param() : ev.param;
+    param = { ...param, ...args };
+    super(ev.type, param);
+    this.#picker = drp;
+    for (const [key2, value] of Object.entries(param)) {
+      if (Object.getOwnPropertyNames(Event.prototype).includes(key2)) continue;
+      this[key2] = value;
+    }
+  }
+  get picker() {
+    return this.#picker;
+  }
+}
+function offset(el) {
+  const rect = el.getBoundingClientRect();
+  return {
+    top: rect.top + window.scrollY,
+    left: rect.left + window.scrollX
+  };
+}
+function outerWidth(el, withMargin = false) {
+  if (!withMargin)
+    return el.offsetWidth;
+  const style = getComputedStyle(el);
+  return el.offsetWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+}
+function outerHeight(el, withMargin = false) {
+  if (!withMargin)
+    return el.offsetHeight;
+  const style = getComputedStyle(el);
+  return el.offsetHeight + parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+}
+function daterangepicker(elements, options, callback) {
+  if (typeof elements === "string")
+    return daterangepicker(document.querySelectorAll(elements), options, callback);
+  if (elements instanceof HTMLElement)
+    elements = [elements];
+  if (elements instanceof NodeList || elements instanceof HTMLCollection)
+    elements = Array.from(elements);
+  if (elements == null)
+    return new DateRangePicker(null, options || {}, callback);
+  elements.forEach((el) => {
+    if (el._daterangepicker && typeof el._daterangepicker.remove === "function")
+      el._daterangepicker.remove();
+    el._daterangepicker = new DateRangePicker(el, options || {}, callback);
+  });
+  return elements.length === 1 ? elements[0] : elements;
+}
+function getDateRangePicker(target) {
+  if (typeof target === "string")
+    target = document.querySelector(target);
+  return target instanceof HTMLElement ? target._daterangepicker : void 0;
+}
+if (window.jQuery?.fn) {
+  jQuery.fn.daterangepicker = function(options, callback) {
+    return this.each(function() {
+      daterangepicker(this, options, callback);
+    });
+  };
+}
+function registerJqueryPlugin(jq) {
+  if (!jq?.fn) return;
+  jq.fn.daterangepicker = function(options, callback) {
+    return this.each(function() {
+      daterangepicker(this, options, callback);
+    });
+  };
+}
+Object.defineProperty(window, "jQuery", {
+  configurable: true,
+  set(value) {
+    this._jQuery = value;
+    registerJqueryPlugin(value);
+  },
+  get() {
+    return this._jQuery;
+  }
+});
+exports.DateRangePicker = DateRangePicker;
+exports.daterangepicker = daterangepicker;
+exports.getDateRangePicker = getDateRangePicker;
+//# sourceMappingURL=daterangepicker.js.map