@wernfried/daterangepicker 5.5.1 → 5.5.2

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>

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
 });

package/dist/cjs/daterangepicker.cjs

@@ -2335,24 +2335,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");