@wernfried/daterangepicker 5.2.7 → 5.2.10

package/API_Doc.md

@@ -635,14 +635,14 @@ Options for DateRangePicker
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | parentEl | <code>string</code> \| [<code>HTMLElement</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLElement) | <code>&quot;body&quot;</code> | [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)  or `HTMLElement` of the parent element that the date range picker will be added to |
-| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | Default: `DateTime.now().startOf('day')`<br>The beginning date of the initially selected date range.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Date value is rounded to match option `timePickerStepSize`<br> Option `isInvalidDate` and `isInvalidTime` are not evaluated, you may set date/time which is not selectable in calendar.<br> If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br> Use `startDate: null` to show calendar without an inital selected date. |
+| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | Default: `DateTime.now().startOf('day')`<br>The beginning date of the initially selected date range.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Date value is rounded to match option `timePickerStepSize`<br> Option `isInvalidDate` and `isInvalidTime` are not evaluated, you may set date/time which is not selectable in calendar.<br> If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br> Use `startDate: null` to show calendar without an initial selected date. |
 | endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> |  | Defautl: `DateTime.now().endOf('day')`<br>The end date of the initially selected date range.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Date value is rounded to match option `timePickerStepSize`<br> Option `isInvalidDate`, `isInvalidTime` and `minSpan`, `maxSpan` are not evaluated, you may set date/time which is not selectable in calendar.<br> If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br> |
 | minDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | The earliest date a user may select or `null` for no limit.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`. |
 | maxDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | The latest date a user may select or `null` for no limit.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`. |
 | minSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The minimum span between the selected start and end dates.<br> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Ignored when `singleDatePicker: true` |
 | maxSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The maximum  span between the selected start and end dates.<br> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Ignored when `singleDatePicker: true` |
 | defaultSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The span which is used when endDate is automatically updated due to wrong user input<br> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Ignored when `singleDatePicker: true`. Not relevant if `minSpan: null` |
-| initalMonth | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | Default: `DateTime.now().startOf('month')`<br> The inital month shown when `startDate: null`. Be aware, the attached `<input>` element must be also empty.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> When `initalMonth` is used, then `endDate` is ignored and it works only with `timePicker: false` |
+| initialMonth | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | Default: `DateTime.now().startOf('month')`<br> The inital month to be shown. Only relevant for `startDate: null`. Be aware, the attached `<input>` element must also be empty.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Works only with `timePicker: false` |
 | autoApply | <code>boolean</code> | <code>false</code> | Hide the `Apply` and `Cancel` buttons, and automatically apply a new date range as soon as two dates are clicked.<br> Only useful when `timePicker: false` |
 | singleDatePicker | <code>boolean</code> | <code>false</code> | Show only a single calendar to choose one date, instead of a range picker with two calendars.<br> If `true`, then `endDate` is always `null`. |
 | singleMonthView | <code>boolean</code> | <code>false</code> | Show only a single month calendar, useful when selected ranges are usually short<br> or for smaller viewports like mobile devices.<br> Ignored for `singleDatePicker: true`. |

package/README.md

@@ -19,8 +19,8 @@ Above samples are based on the [original repository](https://github.com/dangross
 #### Global import with `<script>` tags
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.7/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.7/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.10/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.10/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -40,11 +40,11 @@ Above samples are based on the [original repository](https://github.com/dangross
 {
    "imports": {
       "luxon": "https://cdn.jsdelivr.net/npm/luxon@3.7.2/+esm",
-      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.7/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.10/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.7/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.10/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -63,9 +63,9 @@ Above samples are based on the [original repository](https://github.com/dangross
 #### Style with Bulma
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.7/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.10/dist/global/daterangepicker.min.js"></script>
 <link type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" rel="stylesheet" />
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.7/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.10/css/daterangepicker.bulma.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -121,8 +121,8 @@ Initialisation with jQuery is supported in version 5.x
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.7/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.7/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.10/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.2.10/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -349,14 +349,14 @@ Options for DateRangePicker
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | parentEl | <code>string</code> \| [<code>HTMLElement</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLElement) | <code>&quot;body&quot;</code> | [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)  or `HTMLElement` of the parent element that the date range picker will be added to |
-| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | Default: `DateTime.now().startOf('day')`<br>The beginning date of the initially selected date range.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Date value is rounded to match option `timePickerStepSize`<br> Option `isInvalidDate` and `isInvalidTime` are not evaluated, you may set date/time which is not selectable in calendar.<br> If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br> Use `startDate: null` to show calendar without an inital selected date. |
+| startDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | Default: `DateTime.now().startOf('day')`<br>The beginning date of the initially selected date range.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Date value is rounded to match option `timePickerStepSize`<br> Option `isInvalidDate` and `isInvalidTime` are not evaluated, you may set date/time which is not selectable in calendar.<br> If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br> Use `startDate: null` to show calendar without an initial selected date. |
 | endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> |  | Defautl: `DateTime.now().endOf('day')`<br>The end date of the initially selected date range.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Date value is rounded to match option `timePickerStepSize`<br> Option `isInvalidDate`, `isInvalidTime` and `minSpan`, `maxSpan` are not evaluated, you may set date/time which is not selectable in calendar.<br> If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br> |
 | minDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | The earliest date a user may select or `null` for no limit.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`. |
 | maxDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | The latest date a user may select or `null` for no limit.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`. |
 | minSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The minimum span between the selected start and end dates.<br> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Ignored when `singleDatePicker: true` |
 | maxSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The maximum  span between the selected start and end dates.<br> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Ignored when `singleDatePicker: true` |
 | defaultSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The span which is used when endDate is automatically updated due to wrong user input<br> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Ignored when `singleDatePicker: true`. Not relevant if `minSpan: null` |
-| initalMonth | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | Default: `DateTime.now().startOf('month')`<br> The inital month shown when `startDate: null`. Be aware, the attached `<input>` element must be also empty.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> When `initalMonth` is used, then `endDate` is ignored and it works only with `timePicker: false` |
+| initialMonth | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | Default: `DateTime.now().startOf('month')`<br> The inital month to be shown. Only relevant for `startDate: null`. Be aware, the attached `<input>` element must also be empty.<br> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br> Works only with `timePicker: false` |
 | autoApply | <code>boolean</code> | <code>false</code> | Hide the `Apply` and `Cancel` buttons, and automatically apply a new date range as soon as two dates are clicked.<br> Only useful when `timePicker: false` |
 | singleDatePicker | <code>boolean</code> | <code>false</code> | Show only a single calendar to choose one date, instead of a range picker with two calendars.<br> If `true`, then `endDate` is always `null`. |
 | singleMonthView | <code>boolean</code> | <code>false</code> | Show only a single month calendar, useful when selected ranges are usually short<br> or for smaller viewports like mobile devices.<br> Ignored for `singleDatePicker: true`. |

package/dist/cjs/daterangepicker.cjs

@@ -16,7 +16,7 @@ class DateRangePicker {
     this.maxSpan = null;
     this.minSpan = null;
     this.defaultSpan = null;
-    this.initalMonth = luxon.DateTime.now().startOf("month");
+    this.initialMonth = luxon.DateTime.now().startOf("month");
     this.autoApply = false;
     this.singleDatePicker = false;
     this.singleMonthView = false;
@@ -81,7 +81,7 @@ class DateRangePicker {
       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);
+      const isDate = ["startDate", "endDate", "minDate", "maxDate", "initialMonth"].includes(name);
       dataOptions[name] = ts.isValid && isDate ? ts : JSON.parse(item.value);
     }
     options = { ...dataOptions, ...options };
@@ -296,7 +296,7 @@ class DateRangePicker {
         secondStep: this.timePickerStepSize.seconds
       };
     }
-    for (let opt of ["startDate", "endDate", "minDate", "maxDate", "initalMonth"]) {
+    for (let opt of ["startDate", "endDate", "minDate", "maxDate", "initialMonth"]) {
       if (opt === "endDate" && this.singleDatePicker)
         continue;
       if (typeof options[opt] === "object") {
@@ -359,10 +359,10 @@ class DateRangePicker {
       if (this.#startDate) this.#startDate = this.#startDate.startOf("day");
       if (this.#endDate) this.#endDate = this.#endDate.endOf("day");
     }
-    if (!this.#startDate && this.initalMonth) {
+    if (!this.#startDate && this.initialMonth) {
       this.#endDate = null;
       if (this.timePicker)
-        console.error(`Option 'initalMonth' works only with 'timePicker: false'`);
+        console.error(`Option 'initialMonth' works only with 'timePicker: false'`);
     } else {
       const violations = this.validateInput(null, false);
       if (violations != null) {
@@ -1153,10 +1153,10 @@ class DateRangePicker {
         }
       }
     } else {
-      if (!this.#startDate && this.initalMonth) {
-        this.leftCalendar.month = this.initalMonth;
+      if (!this.#startDate && this.initialMonth) {
+        this.leftCalendar.month = this.initialMonth;
         if (!this.singleMonthView)
-          this.rightCalendar.month = this.initalMonth.plus({ month: 1 });
+          this.rightCalendar.month = this.initialMonth.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");
@@ -1239,8 +1239,8 @@ class DateRangePicker {
     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");
+    if (calendar.month == null && !this.#startDate && this.initialMonth)
+      calendar.month = this.initialMonth.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 });
@@ -1397,6 +1397,7 @@ class DateRangePicker {
       if (maxDate && selected > maxDate)
         selected = maxDate;
     }
+    let disabled = { hour: false, minute: false, second: false, ampm: false };
     html += `<th colspan="7">`;
     if (this.externalStyle === "bulma")
       html += '<div class="select is-small mx-1">';
@@ -1407,19 +1408,18 @@ class DateRangePicker {
       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;
+        disabled.hour = true;
       if (maxDate && time.set({ minute: 0 }) > maxDate)
-        disabled = true;
+        disabled.hour = true;
       if (minLimit && time.endOf("hour") < minLimit)
-        disabled = true;
-      if (!disabled && this.isInvalidTime(time, this.singleDatePicker ? null : side, "hour"))
-        disabled = true;
+        disabled.hour = true;
+      if (!disabled.hour && this.isInvalidTime(time, this.singleDatePicker ? null : side, "hour"))
+        disabled.hour = true;
       if (this.timePicker24Hour) {
-        if (!disabled && i == selected.hour) {
+        if (!disabled.hour && i == selected.hour) {
           html += `<option value="${i}" selected>${i}</option>`;
-        } else if (disabled) {
+        } else if (disabled.hour) {
           html += `<option value="${i}" disabled class="disabled">${i}</option>`;
         } else {
           html += `<option value="${i}">${i}</option>`;
@@ -1428,9 +1428,9 @@ class DateRangePicker {
         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) {
+          if (!disabled.hour && i == selected.hour) {
             html += `<option ampm="${i_ampm}" value="${i % 24}" selected>${i_12}</option>`;
-          } else if (disabled) {
+          } else if (disabled.hour) {
             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>`;
@@ -1451,18 +1451,19 @@ class DateRangePicker {
       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 (disabled.hour)
+          disabled.minute = true;
         if (minDate && time.set({ second: 59 }) < minDate)
-          disabled = true;
+          disabled.minute = true;
         if (maxDate && time.set({ second: 0 }) > maxDate)
-          disabled = true;
+          disabled.minute = 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) {
+          disabled.minute = true;
+        if (!disabled.minute && this.isInvalidTime(time, this.singleDatePicker ? null : side, "minute"))
+          disabled.minute = true;
+        if (selected.minute == i && !disabled.minute) {
           html += `<option value="${i}" selected>${padded}</option>`;
-        } else if (disabled) {
+        } else if (disabled.minute) {
           html += `<option value="${i}" disabled class="disabled">${padded}</option>`;
         } else {
           html += `<option value="${i}">${padded}</option>`;
@@ -1480,18 +1481,19 @@ class DateRangePicker {
       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 (disabled.minute)
+          disabled.second = true;
         if (minDate && time < minDate)
-          disabled = true;
+          disabled.second = true;
         if (maxDate && time > maxDate)
-          disabled = true;
+          disabled.second = true;
         if (minLimit && time < minLimit)
-          disabled = true;
-        if (!disabled && this.isInvalidTime(time, this.singleDatePicker ? null : side, "second"))
-          disabled = true;
-        if (selected.second == i && !disabled) {
+          disabled.second = true;
+        if (!disabled.second && this.isInvalidTime(time, this.singleDatePicker ? null : side, "second"))
+          disabled.second = true;
+        if (selected.second == i && !disabled.second) {
           html += `<option value="${i}" selected>${padded}</option>`;
-        } else if (disabled) {
+        } else if (disabled.second) {
           html += `<option value="${i}" disabled class="disabled">${padded}</option>`;
         } else {
           html += `<option value="${i}">${padded}</option>`;
@@ -1507,14 +1509,15 @@ class DateRangePicker {
       html += '<select class="ampmselect">';
       var am_html = "";
       var pm_html = "";
-      let disabled = false;
+      if (disabled.hour)
+        disabled.ampm = true;
       if (minDate && selected.startOf("day") < minDate)
-        disabled = true;
+        disabled.ampm = true;
       if (maxDate && selected.endOf("day") > maxDate)
-        disabled = true;
+        disabled.ampm = true;
       if (minLimit && selected.startOf("day") < minLimit)
-        disabled = true;
-      if (disabled) {
+        disabled.ampm = true;
+      if (disabled.ampm) {
         am_html = ' disabled class="disabled "';
         pm_html = ' disabled class="disabled"';
       } else {
@@ -1780,7 +1783,7 @@ class DateRangePicker {
     const leftCalendar = this.leftCalendar;
     const rightCalendar = this.rightCalendar;
     const startDate = this.#startDate;
-    const initalMonth = this.initalMonth;
+    const initialMonth = this.initialMonth;
     if (!this.#endDate) {
       this.container.querySelectorAll(".drp-calendar tbody td").forEach((el) => {
         if (el.classList.contains("week")) return;
@@ -1789,7 +1792,7 @@ class DateRangePicker {
         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) {
+        if (!startDate && initialMonth) {
           el.classList.remove("in-range");
         } else {
           el.classList.toggle("in-range", dt > startDate && dt < date || dt.hasSame(date, "day"));
@@ -2180,7 +2183,7 @@ class DateRangePicker {
   * @emits external:change
   */
   updateElement() {
-    if (this.#startDate == null && this.initalMonth)
+    if (this.#startDate == null && this.initialMonth)
       return;
     if (this.isInputText) {
       let newValue = this.formatDate(this.#startDate);