@wernfried/daterangepicker 5.1.6 → 5.1.9

package/API_Doc.md

@@ -27,11 +27,11 @@
 <code>minDate</code>, <code>maxDate</code>, <code>minSpan</code>, <code>maxSpan</code>, <code>invalidDate</code> and <code>invalidTime</code> constraints.<br>
 Event is only triggered when date string is valid and date value is changing<br></p>
 </dd>
-<dt><a href="#event_beforeRenderCalendar">"beforeRenderCalendar"</a></dt>
+<dt><a href="#event_beforeRenderTimePicker">"beforeRenderTimePicker"</a></dt>
 <dd><p>Emitted before the calendar time picker is rendered.</p>
 </dd>
 <dt><a href="#event_beforeRenderCalendar">"beforeRenderCalendar"</a></dt>
-<dd><p>Emitted before the calendar is rendered. Useful to remove any manually added elements.</p>
+<dd><p>Emitted before the calendar is rendered.</p>
 </dd>
 <dt><a href="#event_show">"show"</a></dt>
 <dd><p>Emitted when the picker is shown</p>
@@ -70,10 +70,6 @@ Only useful when <a href="#Ranges">Ranges</a> are used.</p>
 <dt><a href="#event_monthViewChange">"monthViewChange"</a></dt>
 <dd><p>Emitted after month view changed, for example by click on &#39;prev&#39; or &#39;next&#39;</p>
 </dd>
-<dt><a href="#event_beforeRenderTimePicker">"beforeRenderTimePicker" (this)</a></dt>
-<dd><p>Emitted before the TimePicker is rendered.
-Useful to remove any manually added elements.</p>
-</dd>
 </dl>
 
 ## Typedefs
@@ -112,6 +108,7 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
     * [.formatDate(date, format)](#DateRangePicker+formatDate) ⇒ <code>string</code>
     * [.validateInput(range, dipatch)](#DateRangePicker+validateInput) ⇒ <code>InputViolation</code> \| <code>null</code>
     * [.updateView(monthChange)](#DateRangePicker+updateView)
+    * [.move()](#DateRangePicker+move)
     * [.show()](#DateRangePicker+show)
     * [.hide()](#DateRangePicker+hide)
     * [.toggle()](#DateRangePicker+toggle)
@@ -120,7 +117,7 @@ Ranges are not validated against <code>minDate</code>, <code>maxDate</code>, <co
     * [.updateElement()](#DateRangePicker+updateElement)
     * [.updateAltInput()](#DateRangePicker+updateAltInput)
     * [.remove()](#DateRangePicker+remove)
-    * [.addListener(element, eventName, selector, delegate)](#DateRangePicker+addListener)
+    * [.triggerEvent(ev, ...args)](#DateRangePicker+triggerEvent)
 
 <a name="new_DateRangePicker_new"></a>
 
@@ -291,6 +288,12 @@ Could be useful after running [setStartDate](#DateRangePicker+setStartDate) or [
 | --- | --- | --- |
 | monthChange | <code>boolean</code> | If `true` then monthView changed |
 
+<a name="DateRangePicker+move"></a>
+
+### dateRangePicker.move()
+Place the picker at the right place in the document
+
+**Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
 <a name="DateRangePicker+show"></a>
 
 ### dateRangePicker.show()
@@ -344,19 +347,17 @@ Update altInput `<input>` element with selected value
 Removes the picker from document
 
 **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
-<a name="DateRangePicker+addListener"></a>
+<a name="DateRangePicker+triggerEvent"></a>
 
-### dateRangePicker.addListener(element, eventName, selector, delegate)
-Helper function to add eventListener similar to jQuery .on( events [, selector ] [, data ] )
+### dateRangePicker.triggerEvent(ev, ...args)
+Helper function to dispatch events
 
 **Kind**: instance method of [<code>DateRangePicker</code>](#DateRangePicker)  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| element | <code>string</code> | Query selector of element where listener is added |
-| eventName | <code>string</code> | Name of the event |
-| selector | <code>string</code> | Query selector string to filter the descendants of the element |
-| delegate | <code>any</code> | Handler data |
+| ev | <code>Event</code> | From this.#events |
+| ...args | <code>any</code> | Additional parameters if needed |
 
 <a name="DateRangePickerEvent"></a>
 
@@ -434,9 +435,9 @@ drp.setStartDate(DateTime.now().minus({ years: 10 });
 
 // -> Calendar selects and shows "today - 3 days"
 ```
-<a name="event_beforeRenderCalendar"></a>
+<a name="event_beforeRenderTimePicker"></a>
 
-## "beforeRenderCalendar"
+## "beforeRenderTimePicker"
 Emitted before the calendar time picker is rendered.
 
 **Kind**: event emitted  
@@ -450,7 +451,7 @@ Emitted before the calendar time picker is rendered.
 <a name="event_beforeRenderCalendar"></a>
 
 ## "beforeRenderCalendar"
-Emitted before the calendar is rendered. Useful to remove any manually added elements.
+Emitted before the calendar is rendered.
 
 **Kind**: event emitted  
 **Properties**
@@ -622,18 +623,6 @@ Emitted after month view changed, for example by click on 'prev' or 'next'
 | event.left | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | The first day of month in left-hand calendar |
 | event.right | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) | The first day of month in left-hand calendar or `null` for singleDatePicker |
 
-<a name="event_beforeRenderTimePicker"></a>
-
-## "beforeRenderTimePicker" (this)
-Emitted before the TimePicker is rendered.
-Useful to remove any manually added elements.
-
-**Kind**: event emitted  
-
-| Param | Type | Description |
-| --- | --- | --- |
-| this | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
-
 <a name="Options"></a>
 
 ## Options

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.1.6/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.9/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.9/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.1.6/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.9/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.9/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.1.6/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.9/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.1.6/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.9/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.1.6/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.6/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.9/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.1.9/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -182,8 +182,6 @@ input.addEventListener('beforeHide', (ev) => {
 });
 ```
 
-
-
 ## Examples
 ### Option `ranges`
 <a name="options-ranges"></a>

package/dist/esm/daterangepicker.js

@@ -78,6 +78,8 @@ class DateRangePicker {
       const name = item.name.replace(/^data-/g, "").replace(/-([a-z])/g, function(str) {
         return str[1].toUpperCase();
       });
+      if (!Object.keys(this).includes(name) || Object.keys(options).includes(name))
+        continue;
       let ts = DateTime.fromISO(item.value);
       const isDate = ["startDate", "endDate", "minDate", "maxDate", "initalMonth"].includes(name);
       dataOptions[name] = ts.isValid && isDate ? ts : JSON.parse(item.value);
@@ -601,13 +603,13 @@ class DateRangePicker {
     /**
     * Emitted before the calendar time picker is rendered.
     * @event
-    * @name "beforeRenderCalendar"
+    * @name "beforeRenderTimePicker"
     * @property {DateRangePickerEvent} event - The Event object
     * @property {DateRangePicker} event.picker - The daterangepicker object
     */
     onBeforeRenderTimePicker: { type: "beforeRenderTimePicker" },
     /**
-    * Emitted before the calendar is rendered. Useful to remove any manually added elements.
+    * Emitted before the calendar is rendered.
     * @event
     * @name "beforeRenderCalendar"
     * @property {DateRangePickerEvent} event - The Event object
@@ -868,9 +870,6 @@ class DateRangePicker {
     }
   }
   /* #endregion */
-  logDate(date) {
-    return this.timePicker ? date.toISO({ suppressMilliseconds: true }) : date.toISODate();
-  }
   /**
    * Format a DateTime object
    * @param {external:DateTime} date - The DateTime to format
@@ -1361,13 +1360,6 @@ class DateRangePicker {
     this.container.querySelector(`.drp-calendar.${side} .calendar-table tbody`).innerHTML = html;
   }
   /**
-  * Emitted before the TimePicker is rendered.
-  * Useful to remove any manually added elements.
-  * @event
-  * @name "beforeRenderTimePicker"
-  * @param {DateRangePicker} this - The daterangepicker object
-  */
-  /**
   * Renders the time pickers
   * @private
   * @emits "beforeRenderTimePicker"
@@ -1556,7 +1548,6 @@ class DateRangePicker {
   /* #region Move/Show/Hide */
   /**
   * Place the picker at the right place in the document
-  * @private
   */
   move() {
     let parentOffset = { top: 0, left: 0 };
@@ -2247,7 +2238,6 @@ class DateRangePicker {
    * Helper function to dispatch events
    * @param {Event} ev - From this.#events
    * @param  {...any?} args - Additional parameters if needed
-   * @private
    */
   triggerEvent(ev, ...args) {
     if (args.length === 0) {
@@ -2266,6 +2256,7 @@ class DateRangePicker {
    * @param {string} eventName - Name of the event
    * @param {string} selector - Query selector string to filter the descendants of the element
    * @param {any} delegate - Handler data
+   * @private
    */
   addListener(element, eventName, selector, delegate) {
     this.container.querySelectorAll(element).forEach((el) => {