@wernfried/daterangepicker 5.6.1 → 5.7.0

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)

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.0/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.0/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.0/+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.0/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.0/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.0/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.0/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.7.0/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 

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) {
@@ -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 != "") {