@wernfried/daterangepicker 5.4.1 → 5.4.3

package/API_Doc.md

@@ -10,7 +10,7 @@
 ## Functions
 
 <dl>
-<dt><a href="#daterangepicker">daterangepicker(elements, options, callback)</a> ⇒ <code>HTMLElement</code> | <code>Array.&lt;HTMLElement&gt;</code></dt>
+<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>
@@ -366,15 +366,15 @@ Helper function to dispatch events
 **Extends**: <code>Event</code>  
 <a name="daterangepicker"></a>
 
-## daterangepicker(elements, options, callback) ⇒ <code>HTMLElement</code> \| <code>Array.&lt;HTMLElement&gt;</code>
+## daterangepicker(element, options, callback) ⇒ [<code>DateRangePicker</code>](#DateRangePicker) \| [<code>Array.&lt;DateRangePicker&gt;</code>](#DateRangePicker)
 Initiate a new DateRangePicker
 
 **Kind**: global function  
-**Returns**: <code>HTMLElement</code> \| <code>Array.&lt;HTMLElement&gt;</code> - The input `element` instance or an array of HTMLElement instances if `elements` matches more than one element  
+**Returns**: [<code>DateRangePicker</code>](#DateRangePicker) \| [<code>Array.&lt;DateRangePicker&gt;</code>](#DateRangePicker) - The DateRangePicker instance or an array of DateRangePicker instances if `elements` matches more than one element  
 
 | Param | Type | Description |
 | --- | --- | --- |
-| elements | <code>string</code> \| [<code>HTMLElement</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLElement) | Element where DateRangePicker is attached |
+| element | <code>string</code> \| [<code>HTMLElement</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLElement) \| [<code>HTMLCollection</code>](https://developer.mozilla.org/de/docs/Web/API/HTMLCollection) | Element where DateRangePicker is attached |
 | options | [<code>Options</code>](#Options) | Object to configure the DateRangePicker |
 | callback | [<code>callback</code>](#callback) | Callback function executed when date is changed.<br/> Callback function is executed if selected date values has changed, before picker is hidden and before the attached `<input>` element is updated.  As alternative listen to the ["apply"](#event_apply) event |
 

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.1/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.1/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.3/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.3/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.1/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.3/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.1/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.3/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.1/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.3/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.1/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.3/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.1/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.1/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.3/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.3/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 

package/dist/cjs/daterangepicker.cjs

@@ -6,7 +6,7 @@ class DateRangePicker {
   constructor(element, options, cb) {
     if (typeof element === "string" && document.querySelectorAll(element).length > 1)
       throw new RangeError(`Option 'element' must match to one element only`);
-    this.parentEl = "body";
+    this.parentEl = document.querySelector("body");
     this.element = element instanceof HTMLElement ? element : document.querySelector(element);
     this.isInputText = this.element instanceof HTMLInputElement && this.element.type === "text";
     this.button = null;
@@ -161,7 +161,11 @@ class DateRangePicker {
       options.template = template.join("");
       this.container = createElementFromHTML(options.template);
     }
-    this.parentEl = document.querySelector(typeof options.parentEl === "string" ? options.parentEl : this.parentEl);
+    if (options.parentEl instanceof HTMLElement) {
+      this.parentEl = options.parentEl;
+    } else if (typeof options.parentEl === "string") {
+      this.parentEl = document.querySelector(options.parentEl) ?? this.parentEl;
+    }
     this.parentEl.appendChild(this.container);
     if (typeof options.timePicker === "boolean")
       this.timePicker = options.timePicker;
@@ -2365,21 +2369,34 @@ function outerHeight(el, withMargin = false) {
   const style = getComputedStyle(el);
   return el.offsetHeight + parseFloat(style.marginTop) + parseFloat(style.marginBottom);
 }
-function daterangepicker(elements, options, callback) {
-  if (typeof elements === "string")
-    return daterangepicker(document.querySelectorAll(elements), options, callback);
-  if (elements instanceof HTMLElement)
-    elements = [elements];
-  if (elements instanceof NodeList || elements instanceof HTMLCollection)
-    elements = Array.from(elements);
-  if (elements == null)
-    return new DateRangePicker(null, options || {}, callback);
-  elements.forEach((el) => {
-    if (el._daterangepicker && typeof el._daterangepicker.remove === "function")
-      el._daterangepicker.remove();
-    el._daterangepicker = new DateRangePicker(el, options || {}, callback);
-  });
-  return elements.length === 1 ? elements[0] : elements;
+function daterangepicker(element, options, callback) {
+  if (element instanceof HTMLElement) {
+    return new DateRangePicker(element, options || {}, callback);
+  } else if (elements 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));
+    }
+    return ret;
+  } else if (typeof element === "string") {
+    if (document.querySelectorAll(element).length > 1) {
+      const ret = [];
+      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));
+      }
+      return ret;
+    } else if (document.querySelectorAll(element).length === 1) {
+      return new DateRangePicker(element, options || {}, callback);
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
 }
 function getDateRangePicker(target) {
   if (typeof target === "string")