@wernfried/daterangepicker 5.6.1 → 5.7.1

package/API_Doc.md

@@ -104,6 +104,7 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
     * [.setStartDate(startDate, updateView)](#DateRangePicker+setStartDate) ⇒ <code>InputViolation</code>
     * [.setEndDate(endDate, updateView)](#DateRangePicker+setEndDate) ⇒ <code>InputViolation</code>
     * [.setRange(startDate, endDate, updateView)](#DateRangePicker+setRange) ⇒ <code>InputViolation</code>
+    * [.clearDate(month)](#DateRangePicker+clearDate)
     * [.parseDate(value)](#DateRangePicker+parseDate) ⇒ [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
     * [.formatDate(date, format)](#DateRangePicker+formatDate) ⇒ <code>string</code>
     * [.validateInput(range, dipatch)](#DateRangePicker+validateInput) ⇒ <code>InputViolation</code> \| <code>null</code>
@@ -210,6 +211,18 @@ Invalid date values are handled by [violate](#DateRangePicker+violate) Event
 const drp = getDateRangePicker('#picker');
 drp.setRange(DateTime.now().startOf('hour'), DateTime.now().endOf('day'));
 ```
+<a name="DateRangePicker+clearDate"></a>
+
+### dateRangePicker.clearDate(month)
+Clear selected date values.
+Does not invoke callback function, disables "Apply" button
+
+**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| month | <code>sting</code> \| [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| <code>Date</code> | The month to be shown, if null then current month is selected. |
+
 <a name="DateRangePicker+parseDate"></a>
 
 ### dateRangePicker.parseDate(value) ⇒ [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime)
@@ -699,7 +712,7 @@ Options for DateRangePicker
 | isInvalidDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed,<br>  and may return `true` or `false` to indicate whether that date should be available for selection or not.<br> Signature: `isInvalidDate(date)`<br> |
 | isInvalidTime | <code>function</code> | <code>false</code> | A function that is passed each hour/minute/second/am-pm in the two calendars before they are displayed,<br>  and may return `true` or `false` to indicate whether that date should be available for selection or not.<br> Signature: `isInvalidTime(time, side, unit)`<br> `side` is `'start'` or `'end'` or `null` for `singleDatePicker: true`<br> `unit` is `'hour'`, `'minute'`, `'second'` or `'ampm'`<br> Hours are always given as 24-hour clock<br> Ensure that your function returns `false` for at least one item. Otherwise the calender is not rendered.<br> |
 | isCustomDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed,  and may return a string or array of CSS class names to apply to that date's calendar cell.<br> Signature: `isCustomDate(date)` |
-| altInput | <code>string</code> \| <code>Array</code> \| [<code>HTMLInputElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | <code>null</code> | A [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)<br> string or `HTMLElement`  for an alternative output (typically hidden) `<input>` element. Uses `altFormat` to format the value.<br> Must be a single string/HTMLElement for `singleDatePicker: true` or an array of two strings or HTMLElement for `singleDatePicker: false`<br> Example: `['#start', '#end']` |
+| altInput | <code>string</code> \| <code>Array</code> \| [<code>HTMLInputElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | <code>null</code> | A [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)<br> string or `HTMLElement` for an alternative output (typically hidden) `<input>` element. Uses `altFormat` to format the value.<br> Must be a single string/HTMLElement for `singleDatePicker: true` or an array of two strings or HTMLElement for `singleDatePicker: false`<br> Example: `['#start', '#end']` |
 | altFormat | <code>function</code> \| <code>string</code> |  | The output format used for `altInput`.<br> Default: ISO-8601 basic format without time zone, precisison is derived from `timePicker` and `timePickerStepSize`<br> Example `yyyyMMdd'T'HHmm` for `timePicker=true` and display of Minutes<br>  If defined, either a string used with [Format tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or a function.<br> Examples: `"yyyy:MM:dd'T'HH:mm"`,<br>`(date) => date.toUnixInteger()` |
 | applyButtonClasses | <code>string</code> | <code>&quot;btn-primary&quot;</code> | CSS class names that will be added only to the apply button |
 | cancelButtonClasses | <code>string</code> | <code>&quot;btn-default&quot;</code> | CSS class names that will be added only to the cancel button |

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.6.1/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.6.1/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/css/daterangepicker.min.css" rel="stylesheet" />
 
 <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.6.1/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.6.1/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -63,9 +63,9 @@ Above samples are based on the [original repository](https://github.com/dangross
 #### Style with Bulma
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.6.1/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/dist/global/daterangepicker.min.js"></script>
 <link type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" rel="stylesheet" />
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.6.1/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/css/daterangepicker.bulma.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -122,8 +122,8 @@ Initialisation with jQuery is supported in version 5.x
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.6.1/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.6.1/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.1/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -377,7 +377,7 @@ Options for DateRangePicker
 | isInvalidDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed,<br>  and may return `true` or `false` to indicate whether that date should be available for selection or not.<br> Signature: `isInvalidDate(date)`<br> |
 | isInvalidTime | <code>function</code> | <code>false</code> | A function that is passed each hour/minute/second/am-pm in the two calendars before they are displayed,<br>  and may return `true` or `false` to indicate whether that date should be available for selection or not.<br> Signature: `isInvalidTime(time, side, unit)`<br> `side` is `'start'` or `'end'` or `null` for `singleDatePicker: true`<br> `unit` is `'hour'`, `'minute'`, `'second'` or `'ampm'`<br> Hours are always given as 24-hour clock<br> Ensure that your function returns `false` for at least one item. Otherwise the calender is not rendered.<br> |
 | isCustomDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed,  and may return a string or array of CSS class names to apply to that date's calendar cell.<br> Signature: `isCustomDate(date)` |
-| altInput | <code>string</code> \| <code>Array</code> \| [<code>HTMLInputElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | <code>null</code> | A [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)<br> string or `HTMLElement`  for an alternative output (typically hidden) `<input>` element. Uses `altFormat` to format the value.<br> Must be a single string/HTMLElement for `singleDatePicker: true` or an array of two strings or HTMLElement for `singleDatePicker: false`<br> Example: `['#start', '#end']` |
+| altInput | <code>string</code> \| <code>Array</code> \| [<code>HTMLInputElement</code>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) | <code>null</code> | A [Document querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors)<br> string or `HTMLElement` for an alternative output (typically hidden) `<input>` element. Uses `altFormat` to format the value.<br> Must be a single string/HTMLElement for `singleDatePicker: true` or an array of two strings or HTMLElement for `singleDatePicker: false`<br> Example: `['#start', '#end']` |
 | altFormat | <code>function</code> \| <code>string</code> |  | The output format used for `altInput`.<br> Default: ISO-8601 basic format without time zone, precisison is derived from `timePicker` and `timePickerStepSize`<br> Example `yyyyMMdd'T'HHmm` for `timePicker=true` and display of Minutes<br>  If defined, either a string used with [Format tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or a function.<br> Examples: `"yyyy:MM:dd'T'HH:mm"`,<br>`(date) => date.toUnixInteger()` |
 | applyButtonClasses | <code>string</code> | <code>&quot;btn-primary&quot;</code> | CSS class names that will be added only to the apply button |
 | cancelButtonClasses | <code>string</code> | <code>&quot;btn-default&quot;</code> | CSS class names that will be added only to the cancel button |

package/dist/cjs/daterangepicker.cjs

@@ -384,8 +384,6 @@ class DateRangePicker {
     }
     if (!this.#startDate && this.initialMonth) {
       this.#endDate = null;
-      if (this.timePicker)
-        console.error(`Option 'initialMonth' works only with 'timePicker: false'`);
     } else {
       const violations = this.validateInput(null, false);
       if (violations != null) {
@@ -418,15 +416,15 @@ class DateRangePicker {
     if (this.singleDatePicker) {
       if (typeof options.altInput === "string") {
         const el = document.querySelector(options.altInput);
-        this.altInput = el instanceof HTMLInputElement && el.type === "text" ? el : null;
+        this.altInput = el instanceof HTMLInputElement && ["text", "hidden"].includes(el.type) ? el : null;
       } else if (options.altInput instanceof HTMLElement) {
-        this.altInput = options.altInput instanceof HTMLInputElement && options.altInput.type === "text" ? options.altInput : null;
+        this.altInput = options.altInput instanceof HTMLInputElement && ["text", "hidden"].includes(options.altInput.type) ? options.altInput : null;
       }
     } else if (!this.singleDatePicker && Array.isArray(options.altInput) && options.altInput.length === 2) {
       this.altInput = [];
       for (let item of options.altInput) {
         const el = typeof item === "string" ? document.querySelector(item) : item;
-        if (el instanceof HTMLInputElement && el.type === "text")
+        if (el instanceof HTMLInputElement && ["text", "hidden"].includes(el.type))
           this.altInput.push(el);
       }
       if (this.altInput.length !== 2)
@@ -872,6 +870,31 @@ class DateRangePicker {
       this.updateView(monthChange);
     return violations;
   }
+  /**
+   * Clear selected date values.
+   * Does not invoke callback function, disables "Apply" button
+   * @param {sting|external:DateTime|Date} month - The month to be shown, if null then current month is selected.
+   */
+  clearDate(month) {
+    const initialMonth = this.parseDate(month ?? this.#startDate.startOf("month"));
+    this.oldStartDate = this.#startDate;
+    this.oldEndDate = this.#endDate;
+    this.#startDate = null;
+    this.#endDate = null;
+    if (this.isInputText)
+      this.element.value = "";
+    if (!this.singleDatePicker)
+      this.chosenLabel = null;
+    if (this.altInput) {
+      if (this.singleDatePicker) {
+        this.altInput.value = "";
+      } else {
+        this.altInput[0].value = "";
+        this.altInput[1].value = "";
+      }
+    }
+    this.updateView(!initialMonth.hasSame(this.oldStartDate, "month"));
+  }
   /**
    * Parse date value
    * @param {sting|external:DateTime|Date} value - The value to be parsed
@@ -884,7 +907,7 @@ class DateRangePicker {
       } else if (value instanceof Date) {
         return luxon.DateTime.fromJSDate(value);
       } else {
-        throw RangeError(`Value must be a luxon.DateTime or Date or string`);
+        throw RangeError(`Value must be a luxon.DateTime or Date or string. Or use clearDate() to clear date values`);
       }
     } else if (typeof value === "string") {
       const format = typeof this.locale.format === "string" ? this.locale.format : luxon.DateTime.parseFormatForOpts(this.locale.format);
@@ -1214,42 +1237,48 @@ class DateRangePicker {
   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);
-        }
+      if (this.#startDate == null && this.#endDate == null) {
+        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 });
       } 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);
+        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 });
       }
-      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)
@@ -1404,20 +1433,27 @@ class DateRangePicker {
   * @emits "beforeRenderTimePicker"
   */
   renderTimePicker(side) {
-    if (side === "end" && !this.#endDate) return;
+    if (side === "end" && !this.#endDate && this.#startDate) 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.minSpan);
+    if (this.#startDate) {
+      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.minSpan);
+    } else {
+      if (this.maxSpan && (!this.maxDate || this.initialMonth.plus(this.maxSpan) < this.maxDate))
+        maxDate = this.initialMonth.plus(this.maxSpan);
+      if (this.minSpan && side === "end")
+        minLimit = this.initialMonth.plus(this.minSpan);
+    }
     if (side === "start") {
-      selected = this.#startDate;
+      selected = this.#startDate ?? this.initialMonth.startOf("day");
       minDate = this.minDate;
     } else if (side === "end") {
-      selected = this.#endDate;
+      selected = this.#endDate ?? this.initialMonth.startOf("day");
       minDate = this.#startDate;
       let timeSelector = this.container.querySelector(".drp-calendar .calendar-time.end-time");
       if (timeSelector.innerHTML != "") {