@wernfried/daterangepicker 5.3.7 → 5.4.1

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.3.7/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.7/css/daterangepicker.min.css" rel="stylesheet" />
+<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" />
 
 <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.3.7/+esm"
+      "daterangepicker": "https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.1/+esm"
    }
 }
 </script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.7/css/daterangepicker.min.css" rel="stylesheet" />
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.4.1/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.3.7/dist/global/daterangepicker.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/bulma@1.0.4/css/bulma.min.css" rel="stylesheet" />
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.7/css/daterangepicker.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" />
 
 <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.3.7/dist/global/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/@wernfried/daterangepicker@5.3.7/css/daterangepicker.min.css" rel="stylesheet" />
+<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" />
 
 <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"))
@@ -315,12 +315,12 @@ class DateRangePicker {
       if (opt === "endDate" && this.singleDatePicker)
         continue;
       if (typeof options[opt] === "object") {
-        if (luxon.DateTime.isDateTime(options[opt]) && options[opt].isValid) {
+        if (options[opt] == null) {
+          this[opt] = null;
+        } else if (luxon.DateTime.isDateTime(options[opt])) {
           this[opt] = options[opt];
         } else if (options[opt] instanceof Date) {
           this[opt] = luxon.DateTime.fromJSDate(options[opt]);
-        } else if (options[opt] === null) {
-          this[opt] = null;
         } else {
           console.error(`Option '${opt}' must be a luxon.DateTime or Date or 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])) {
@@ -617,7 +617,7 @@ class DateRangePicker {
     * // -> Calendar selects and shows "today - 3 days"
     */
     onViolate: { type: "violate", param: (violation, newDate) => {
-      return { ...violation, ...{ cancelable: true } };
+      return { ...violation, cancelable: true };
     } },
     /**
     * Emitted before the calendar time picker is rendered.
@@ -1335,7 +1335,7 @@ class DateRangePicker {
       html += `<th class="week">${this.locale.weekLabel}</th>`;
     for (let [index, dayOfWeek] of this.locale.daysOfWeek.entries()) {
       html += "<th";
-      if (this.weekendDayClasses && this.weekendDayClasses.length && luxon.Info.getWeekendWeekdays().includes(index + 1))
+      if (this.weekendDayClasses && this.weekendDayClasses.length && luxon.Info.getWeekendWeekdays().includes(calendar[0][index].weekday))
         html += ` class="${this.weekendDayClasses}"`;
       html += `>${dayOfWeek}</th>`;
     }