@wernfried/daterangepicker 5.5.1 → 5.6.0

package/API_Doc.md

@@ -119,6 +119,7 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
     * [.remove()](#DateRangePicker+remove)
     * [.triggerEvent(ev, ...args)](#DateRangePicker+triggerEvent)
     * [.addEventListener(type, listener, [options])](#DateRangePicker+addEventListener)
+    * [.removeEventListener(type, listener, [options])](#DateRangePicker+removeEventListener)
 
 <a name="new_DateRangePicker_new"></a>
 
@@ -363,23 +364,37 @@ Helper function to dispatch events
 <a name="DateRangePicker+addEventListener"></a>
 
 ### dateRangePicker.addEventListener(type, listener, [options])
-Adds an event listener to the anchor element (e.g., `<input>`) the DateRangePicker is attached to.
-This allows external code to subscribe to native DOM events such as 'click', 'focus', 'keyup', etc.
+Adding event listener to input element where dateragnepicker is attached to.
+Wrapper to give easy access for `addEventListener()` on DateRangePicker instance.
 
 **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| type | <code>string</code> | The event name (e.g., 'click', 'focus', 'keyup') |
+| type | <code>string</code> | The event name, either native DOM-Event or [DateRangePicker](API_Doc.md#event) specific event |
 | listener | <code>function</code> | The callback function invoked when the event fires |
 | [options] | <code>boolean</code> \| <code>object</code> | Optional event options:   - `boolean capture`: Whether to listen in the capture phase (default: `false`)   - `object signal`: An `AbortSignal` for later removal of the listener (default: `undefined`) |
 
 **Example**  
 ```js
-daterangepicker.addEventListener('click', (e) => {
-   console.log('Picker element was clicked', e);
+picker.addEventListener('hide', (e) => {
+   console.log('Picker element was hidden', e);
 });
 ```
+<a name="DateRangePicker+removeEventListener"></a>
+
+### dateRangePicker.removeEventListener(type, listener, [options])
+Counterpart to `addEventListener()`
+Note, `listener` most be a named function to enable remove.
+
+**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event name, either native |
+| listener | <code>function</code> | The callback function invoked when the event fires |
+| [options] | <code>boolean</code> \| <code>object</code> | Optional event options:   - `boolean capture`: Whether to listen in the capture phase (default: `false`)   - `object signal`: An `AbortSignal` for later removal of the listener (default: `undefined`) |
+
 <a name="DateRangePickerEvent"></a>
 
 ## DateRangePickerEvent ⇐ <code>Event</code>
@@ -679,7 +694,7 @@ Options for DateRangePicker
 | timePicker24Hour | <code>boolean</code> |  | Use 24-hour instead of 12-hour times, removing the AM/PM selection.<br> Default is derived from current locale [Intl.DateTimeFormat.resolvedOptions.hour12](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions#hour12). |
 | timePickerStepSize | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> |  | Default: `Duration.fromObject({minutes:1})`<br>Set the time picker step size.<br> Must be a `luxon.Duration` or the number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Valid values are 1,2,3,4,5,6,10,12,15,20,30 for `Duration.fromObject({seconds: ...})` and `Duration.fromObject({minutes: ...})`  and 1,2,3,4,6,(8,12) for `Duration.fromObject({hours: ...})`.<br> Duration must be greater than `minSpan` and smaller than `maxSpan`.<br> For example `timePickerStepSize: 600` will disable time picker seconds and time picker minutes are set to step size of 10 Minutes. |
 | autoUpdateInput | <code>boolean</code> | <code>true</code> | Indicates whether the DateRangePicker should instantly update the value of the attached `<input>`  element when the selected dates change.<br>The `<input>` element will be always updated on `Apply` and reverted when user clicks on `Cancel`. |
-| onOutsideClick | <code>string</code> | <code>&quot;apply&quot;</code> | Defines what picker shall do when user clicks outside the calendar.  `'apply'` or `'cancel'`. Event [onOutsideClick](#event_outsideClick) is always emitted.return; If you like to do nothing (i.e. neither `apply` nor `cancel`), call `event.preventDefault()` in the event listener. |
+| onOutsideClick | <code>string</code> | <code>&quot;apply&quot;</code> | Defines what picker shall do when user clicks outside the calendar. `cancel`,  `apply` or `hide`. Event [onOutsideClick](#event_outsideClick) is always emitted;<br> `cancel` reverts to previous date values. Note, `apply` is only useful with `autoApply: false`, otherwise date values will apply multiple times<br> If you like to do nothing, call `event.preventDefault()` in the event listener. |
 | linkedCalendars | <code>boolean</code> | <code>true</code> | When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February),  and both will be advanced when clicking the left or right arrows above the calendars.<br> When disabled, the two calendars can be individually advanced and display any month/year |
 | 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> |

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.5.1/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.1/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.2/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.2/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.5.1/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.2/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.1/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.2/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -52,7 +52,7 @@ Above samples are based on the [original repository](https://github.com/dangross
    import { DateTime } from 'luxon';
    import { daterangepicker } from 'daterangepicker';
 
-   daterangepicker('#picker', {
+   const picker = daterangepicker('#picker', {
       startDate: DateTime.now().plus({day: 1})
    }, (start, end) => {
       console.log(`Selected range: ${start.toString()} to ${end.toString()}`)
@@ -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.5.1/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.2/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.5.1/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.2/css/daterangepicker.bulma.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -99,16 +99,17 @@ Values in `options` of `daterangepicker(el, options)` take precedence over `data
 <script type="module">
    import {daterangepicker, getDateRangePicker} from 'daterangepicker'; // or global import with <script> tag
    
-   const input = daterangepicker('#picker', {}); // returns the mutated <input> HTMLElement
+   const input = document.getElementById('picker');
+   const picker = daterangepicker('#picker', {}); // returns DateRangePicker instance or array of DateRangePicker if selector matches more than one element
    // or daterangepicker(document.querySelector('#picker'), {})
 
-   const drp = getDateRangePicker('#picker');
+   // Get DateRangePicker instance after initialization
+   const drp = getDateRangePicker(input);
    // or DateRangePicker.getDateRangePicker('#picker'); if imported globally with <script> tag
 
-   console.log( drp.startDate.toString()) // prints the selected startDate
-   console.log( drp === input._daterangepicker) // prints 'true'
-   console.log( drp.element === input) // prints 'true'
-   console.log( document.querySelector('#picker') === input) // prints 'true'
+   console.log( picker.startDate.toString()) // prints the selected startDate
+   console.log( picker === input._daterangepicker) // prints 'true'
+   console.log( picker.element === input) // prints 'true'
 </script>
 ```
 
@@ -121,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.5.1/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.1/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.2/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.5.2/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -161,7 +162,7 @@ $('#picker').daterangepicker({
 });
 
 // version 5.x - without jQuery
-const input = daterangepicker('#picker', { // or DateRangePicker.daterangepicker('#picker', ...
+const picker = daterangepicker('#picker', { // or DateRangePicker.daterangepicker('#picker', ...
    startDate: DateTime.now(),
    // allow only dates from current year
    minDate: DateTime.now().startOf('year'),
@@ -169,14 +170,14 @@ const input = daterangepicker('#picker', { // or DateRangePicker.daterangepicker
    singleDatePicker: true
 });
 
-input.addEventListener('violate', (ev) => {
+picker.addEventListener('violate', (ev) => {
    ev.newDate.startDate = DateTime.now().minus({ days: 3 }).startOf('day');
    ev.preventDefault();
 });
-input.addEventListener('show', (ev) => {
+picker.addEventListener('show', (ev) => {
    console.log('Show the picker')
 });
-input.addEventListener('beforeHide', (ev) => {
+picker.addEventListener('beforeHide', (ev) => {
    console.log(ev.picker.startDate.toString());
    ev.preventDefault(); // -> do not hide the picker
 });
@@ -371,7 +372,7 @@ Options for DateRangePicker
 | timePicker24Hour | <code>boolean</code> |  | Use 24-hour instead of 12-hour times, removing the AM/PM selection.<br> Default is derived from current locale [Intl.DateTimeFormat.resolvedOptions.hour12](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions#hour12). |
 | timePickerStepSize | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> |  | Default: `Duration.fromObject({minutes:1})`<br>Set the time picker step size.<br> Must be a `luxon.Duration` or the number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br> Valid values are 1,2,3,4,5,6,10,12,15,20,30 for `Duration.fromObject({seconds: ...})` and `Duration.fromObject({minutes: ...})`  and 1,2,3,4,6,(8,12) for `Duration.fromObject({hours: ...})`.<br> Duration must be greater than `minSpan` and smaller than `maxSpan`.<br> For example `timePickerStepSize: 600` will disable time picker seconds and time picker minutes are set to step size of 10 Minutes. |
 | autoUpdateInput | <code>boolean</code> | <code>true</code> | Indicates whether the DateRangePicker should instantly update the value of the attached `<input>`  element when the selected dates change.<br>The `<input>` element will be always updated on `Apply` and reverted when user clicks on `Cancel`. |
-| onOutsideClick | <code>string</code> | <code>&quot;apply&quot;</code> | Defines what picker shall do when user clicks outside the calendar.  `'apply'` or `'cancel'`. Event [onOutsideClick](#event_outsideClick) is always emitted.return; If you like to do nothing (i.e. neither `apply` nor `cancel`), call `event.preventDefault()` in the event listener. |
+| onOutsideClick | <code>string</code> | <code>&quot;apply&quot;</code> | Defines what picker shall do when user clicks outside the calendar. `cancel`,  `apply` or `hide`. Event [onOutsideClick](#event_outsideClick) is always emitted;<br> `cancel` reverts to previous date values. Note, `apply` is only useful with `autoApply: false`, otherwise date values will apply multiple times<br> If you like to do nothing, call `event.preventDefault()` in the event listener. |
 | linkedCalendars | <code>boolean</code> | <code>true</code> | When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February),  and both will be advanced when clicking the left or right arrows above the calendars.<br> When disabled, the two calendars can be individually advanced and display any month/year |
 | 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> |

package/dist/cjs/daterangepicker.cjs

@@ -454,10 +454,10 @@ class DateRangePicker {
       this.buttonClasses = options.buttonClasses;
     }
     if (typeof options.onOutsideClick === "string") {
-      if (["cancel", "apply"].includes(options.onOutsideClick))
+      if (["cancel", "apply", "hide"].includes(options.onOutsideClick))
         this.onOutsideClick = options.onOutsideClick;
       else
-        console.error(`Option 'onOutsideClick' must be 'cancel' or 'apply'`);
+        console.error(`Option 'onOutsideClick' must be 'cancel', 'apply' or 'hide'`);
     }
     if (this.locale.firstDay != 1) {
       let iterator = this.locale.firstDay;
@@ -1698,14 +1698,10 @@ class DateRangePicker {
   */
   hide() {
     if (!this.isShowing) return;
-    if (!this.#endDate) {
+    if (!this.#endDate && !this.singleDatePicker) {
       this.#startDate = this.oldStartDate;
       this.#endDate = this.oldEndDate;
     }
-    if (typeof this.callback === "function") {
-      if (this.#startDate && !this.#startDate.equals(this.oldStartDate ?? luxon.DateTime) || this.#endDate && !this.singleDatePicker && !this.#endDate.equals(this.oldEndDate ?? luxon.DateTime))
-        this.callback(this.startDate, this.endDate, this.chosenLabel);
-    }
     this.updateElement();
     const event = this.triggerEvent(this.#events.onBeforeHide);
     if (event.defaultPrevented)
@@ -1777,8 +1773,12 @@ class DateRangePicker {
     if (this.onOutsideClick === "cancel") {
       this.#startDate = this.oldStartDate;
       this.#endDate = this.oldEndDate;
+      this.hide();
+    } else if (this.onOutsideClick === "apply") {
+      this.clickApply();
+    } else {
+      this.hide();
     }
-    this.hide();
   }
   /**
   * Move calendar to previous month
@@ -2141,6 +2141,11 @@ class DateRangePicker {
   * @private
      */
   clickApply() {
+    this.updateElement();
+    if (typeof this.callback === "function") {
+      if (this.#startDate && (this.#endDate || !this.singleDatePicker))
+        this.callback(this.startDate, this.endDate, this.chosenLabel);
+    }
     this.hide();
     this.triggerEvent(this.#events.onApply);
   }
@@ -2335,24 +2340,37 @@ class DateRangePicker {
     });
   }
   /**
-   * Adds an event listener to the anchor element (e.g., `<input>`) the DateRangePicker is attached to.
-   * This allows external code to subscribe to native DOM events such as 'click', 'focus', 'keyup', etc.
+   * Adding event listener to input element where dateragnepicker is attached to.
+   * Wrapper to give easy access for `addEventListener()` on DateRangePicker instance. 
    * 
-   * @param {string} type - The event name (e.g., 'click', 'focus', 'keyup')
+   * @param {string} type - The event name, either native DOM-Event or [DateRangePicker](API_Doc.md#event) specific event
    * @param {function} listener - The callback function invoked when the event fires
    * @param {boolean|object} [options] - Optional event options:
    *   - `boolean capture`: Whether to listen in the capture phase (default: `false`)
    *   - `object signal`: An `AbortSignal` for later removal of the listener (default: `undefined`)
    * 
    * @example
-   * daterangepicker.addEventListener('click', (e) => {
-   *    console.log('Picker element was clicked', e);
+   * picker.addEventListener('hide', (e) => {
+   *    console.log('Picker element was hidden', e);
    * });
    * 
    */
   addEventListener(type, listener, options) {
     this.element.addEventListener(type, listener, options);
   }
+  /**
+   * Counterpart to `addEventListener()`
+   * Note, `listener` most be a named function to enable remove.
+   * 
+   * @param {string} type - The event name, either native 
+   * @param {function} listener - The callback function invoked when the event fires
+   * @param {boolean|object} [options] - Optional event options:
+   *   - `boolean capture`: Whether to listen in the capture phase (default: `false`)
+   *   - `object signal`: An `AbortSignal` for later removal of the listener (default: `undefined`)
+   */
+  removeEventListener(type, listener, options) {
+    this.element.removeEventListener(type, listener, options);
+  }
 }
 function createElementFromHTML(html) {
   const template = document.createElement("template");