@wernfried/daterangepicker 5.4.9 → 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>
 

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.9/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.9/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.9/+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.9/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.9/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.9/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.9/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.9/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" />
 

package/dist/cjs/daterangepicker.cjs

@@ -2328,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");
@@ -2373,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") {
@@ -2388,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) {