@wernfried/daterangepicker 5.3.1 → 5.3.8

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@%npm_package_version%/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@%npm_package_version%/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.8/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.8/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@%npm_package_version%/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.8/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@%npm_package_version%/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.8/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@%npm_package_version%/dist/global/daterangepicker.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.8/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@%npm_package_version%/css/daterangepicker.bulma.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.8/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@%npm_package_version%/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@%npm_package_version%/css/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.8/dist/global/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.8/css/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="picker" />
 
@@ -254,6 +254,7 @@ Compared to [inital repository](https://github.com/dangrossman/daterangepicker),
 - Added option `onOutsideClick` where you can define whether picker shall apply or revert selected value
 - Added option `initalMonth` to show datepicker without an initial date
 - Added option `singleMonthView` to show single month calendar, useful for shorter ranges
+- Added option `showOnClick` and `button` to provide better control when DateRangePicker pops up
 - Better validation of input parameters, errors are logged to console
 - Highlight range in calendar when hovering over pre-defined ranges
 - Option `autoUpdateInput` defines whether the attached `<input>` element is updated when the user clicks on a date value.<br>
@@ -267,21 +268,19 @@ but other frameworks may be added in future releases
 - ... and maybe some new bugs 😉 
 
 ### Localization
-All date values are based on [luxon](https://moment.github.io/luxon/index.html#/intl) which provides great support for localization. Instead of providing date format, weekday and month names manually as strings, it is usually easier to set the default locale like this:
+All date values are based on [luxon](https://moment.github.io/luxon/index.html#/intl) which provides great support for localization. Instead of providing date format, weekdays, month names, etc. manually it is usually easier to set the default locale like this:
 ```js
 const Settings = luxon.Settings;
 Settings.defaultLocale = 'fr-CA'
-
 daterangepicker('#picker', {
-   timePicker: true,
-   singleDatePicker: false
+   timePicker: true
 };
 ```
 instead of 
 ```js
 daterangepicker('#picker', {
    timePicker: true,
-   singleDatePicker: false,
+   timePicker24Hour: true,
    locale: {
       format: 'yyyyy-M-d H h m',
       daysOfWeek: [ 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.', 'dim.' ],

package/dist/cjs/daterangepicker.cjs

@@ -87,7 +87,7 @@ class DateRangePicker {
       dataOptions[name] = ts.isValid && isDate ? ts : JSON.parse(item.value);
     }
     options = { ...dataOptions, ...options };
-    if (["string", "object"].includes(typeof options.button)) {
+    if (["string", "object"].includes(typeof options.button) && options.button != null) {
       let button = options.button;
       if (typeof button === "string" && document.querySelectorAll(button).length === 1)
         button = document.querySelector(button);
@@ -178,7 +178,7 @@ class DateRangePicker {
         else
           console.error(`Option 'locale.direction' must be 'rtl' or 'ltr'`);
       }
-      if (["string", "object"].includes(typeof options.locale.format))
+      if (["string", "object"].includes(typeof options.locale.format) && options.locale.format !== null)
         this.locale.format = options.locale.format;
       if (Array.isArray(options.locale.daysOfWeek)) {
         if (options.locale.daysOfWeek.some((x) => typeof x !== "string"))
@@ -458,7 +458,7 @@ class DateRangePicker {
         iterator--;
       }
     }
-    if (!this.singleDatePicker && typeof options.ranges === "object") {
+    if (!this.singleDatePicker && typeof options.ranges === "object" && options.ranges != null) {
       for (let range in options.ranges) {
         let start, end;
         if (["string", "object"].includes(typeof options.ranges[range][0])) {