@wernfried/daterangepicker 5.4.6 → 5.4.10

package/API_Doc.md

@@ -13,7 +13,7 @@
 <dt><a href="#daterangepicker">daterangepicker(element, options, callback)</a> ⇒ <code><a href="#DateRangePicker">DateRangePicker</a></code> | <code><a href="#DateRangePicker">Array.&lt;DateRangePicker&gt;</a></code></dt>
 <dd><p>Initiate a new DateRangePicker</p>
 </dd>
-<dt><a href="#getDateRangePicker">getDateRangePicker(target)</a> ⇒ <code><a href="#DateRangePicker">DateRangePicker</a></code></dt>
+<dt><a href="#getDateRangePicker">getDateRangePicker(element)</a> ⇒ <code><a href="#DateRangePicker">DateRangePicker</a></code></dt>
 <dd><p>Returns the DateRangePicker. Equivalent to <code>element._daterangepicker</code></p>
 </dd>
 </dl>
@@ -118,6 +118,7 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
     * [.updateAltInput()](#DateRangePicker+updateAltInput)
     * [.remove()](#DateRangePicker+remove)
     * [.triggerEvent(ev, ...args)](#DateRangePicker+triggerEvent)
+    * [.addEventListener(type, listener, [options])](#DateRangePicker+addEventListener)
 
 <a name="new_DateRangePicker_new"></a>
 
@@ -359,6 +360,26 @@ Helper function to dispatch events
 | ev | <code>object</code> | Event template from this.#events |
 | ...args | <code>object</code> | Additional parameters if needed |
 
+<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.
+
+**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| type | <code>string</code> | The event name (e.g., 'click', 'focus', 'keyup') |
+| 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);
+});
+```
 <a name="DateRangePickerEvent"></a>
 
 ## DateRangePickerEvent ⇐ <code>Event</code>
@@ -380,7 +401,7 @@ Initiate a new DateRangePicker
 
 <a name="getDateRangePicker"></a>
 
-## getDateRangePicker(target) ⇒ [<code>DateRangePicker</code>](#DateRangePicker)
+## getDateRangePicker(element) ⇒ [<code>DateRangePicker</code>](#DateRangePicker)
 Returns the DateRangePicker. Equivalent to `element._daterangepicker`
 
 **Kind**: global function  
@@ -388,7 +409,7 @@ Returns the DateRangePicker. Equivalent to `element._daterangepicker`
 
 | Param | Type | Description |
 | --- | --- | --- |
-| target | <code>HTMLElement</code> \| <code>string</code> | The HTMLElement or querySelector string where the DateRangePicker is attached. |
+| element | <code>HTMLElement</code> \| <code>string</code> | The HTMLElement or querySelector string where the DateRangePicker is attached. |
 
 <a name="event_violate"></a>
 
@@ -657,7 +678,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. |
+| 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. |
 | 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.4.6/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.6/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.10/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.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.4.6/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.10/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.6/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.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.4.6/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.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.4.6/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.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.4.6/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.6/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.10/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.10/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -370,7 +370,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. |
+| 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. |
 | 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

@@ -166,6 +166,8 @@ class DateRangePicker {
     } else if (typeof options.parentEl === "string") {
       this.parentEl = document.querySelector(options.parentEl) ?? this.parentEl;
     }
+    if (this.parentEl.matches("input"))
+      console.error('Parent element "parentEl" must not a self-closing "<input>"');
     this.parentEl.appendChild(this.container);
     if (typeof options.timePicker === "boolean")
       this.timePicker = options.timePicker;
@@ -1605,7 +1607,7 @@ class DateRangePicker {
         top: offset(this.parentEl).top - this.parentEl.scrollTop,
         left: offset(this.parentEl).left - this.parentEl.scrollLeft
       };
-      parentRightEdge = this.parentEl.clientWidth + offset(this.parentEl).left;
+      parentRightEdge = this.parentEl.clientWidth + parentOffset.left;
     }
     switch (this.drops) {
       case "auto":
@@ -2326,6 +2328,25 @@ 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.
+   * 
+   * @param {string} type - The event name (e.g., 'click', 'focus', 'keyup')
+   * @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);
+   * });
+   * 
+   */
+  addEventListener(type, listener, options) {
+    this.element.addEventListener(type, listener, options);
+  }
 }
 function createElementFromHTML(html) {
   const template = document.createElement("template");
@@ -2371,13 +2392,16 @@ function outerHeight(el, withMargin = false) {
 }
 function daterangepicker(element, options, callback) {
   if (element instanceof HTMLElement) {
-    return new DateRangePicker(element, options || {}, callback);
-  } else if (elements instanceof NodeList || element instanceof HTMLCollection) {
+    element._daterangepicker = new DateRangePicker(element, options || {}, callback);
+    return element._daterangepicker;
+  } else if (element instanceof NodeList || element instanceof HTMLCollection) {
     const ret = [];
     for (const el of Array.from(element)) {
       if (el._daterangepicker && typeof el._daterangepicker.remove === "function")
         el._daterangepicker.remove();
-      ret.push(new DateRangePicker(el, options || {}, callback));
+      const picker = new DateRangePicker(el, options || {}, callback);
+      el._daterangepicker = picker;
+      ret.push(picker);
     }
     return ret;
   } else if (typeof element === "string") {
@@ -2386,22 +2410,30 @@ function daterangepicker(element, options, callback) {
       for (const el of Array.from(document.querySelectorAll(element))) {
         if (el._daterangepicker && typeof el._daterangepicker.remove === "function")
           el._daterangepicker.remove();
-        ret.push(new DateRangePicker(el, options || {}, callback));
+        const picker = new DateRangePicker(el, options || {}, callback);
+        el._daterangepicker = picker;
+        ret.push(picker);
       }
       return ret;
     } else if (document.querySelectorAll(element).length === 1) {
-      return new DateRangePicker(element, options || {}, callback);
+      const picker = new DateRangePicker(element, options || {}, callback);
+      document.querySelector(element)._daterangepicker = picker;
+      return picker;
     } else {
-      return null;
+      return void 0;
     }
+  } else if (element == null) {
+    return new DateRangePicker(element, options || {}, callback);
   } else {
-    return null;
+    return void 0;
   }
 }
-function getDateRangePicker(target) {
-  if (typeof target === "string")
-    target = document.querySelector(target);
-  return target instanceof HTMLElement ? target._daterangepicker : void 0;
+function getDateRangePicker(element) {
+  if (typeof element === "string") {
+    return document.querySelector(element)._daterangepicker;
+  } else {
+    return element instanceof HTMLElement ? element._daterangepicker : void 0;
+  }
 }
 if (window.jQuery?.fn) {
   jQuery.fn.daterangepicker = function(options, callback) {