@wernfried/daterangepicker 5.1.9 → 5.2.0

package/API_Doc.md

@@ -536,10 +536,11 @@ Emitted when user clicks outside the picker. Use option `onOutsideClick` to defi
 **Kind**: event emitted  
 **Properties**
 
-| Name | Type | Description |
-| --- | --- | --- |
-| event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) | The Event object |
-| event.picker | [<code>DateRangePicker</code>](#DateRangePicker) | The daterangepicker object |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| event | [<code>DateRangePickerEvent</code>](#DateRangePickerEvent) |  | The Event object |
+| event.picker | [<code>DateRangePicker</code>](#DateRangePicker) |  | The daterangepicker object |
+| event.cancelable | <code>boolean</code> | <code>true</code> | Call `event.preventDefault()` to prevent default behaviour.<br> Useful to define custome areas where click shall not hide the picker |
 
 <a name="event_dateChange"></a>
 

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

package/dist/esm/daterangepicker.js

@@ -664,8 +664,10 @@ class DateRangePicker {
     * @name "outsideClick"
     * @property {DateRangePickerEvent} event - The Event object
     * @property {DateRangePicker} event.picker - The daterangepicker object
+    * @property {boolean} event.cancelable=true - Call `event.preventDefault()` to prevent default behaviour.<br>
+    * Useful to define custome areas where click shall not hide the picker
     */
-    onOutsideClick: { type: "outsideClick" },
+    onOutsideClick: { type: "outsideClick", param: { cancelable: true } },
     /**
     * Emitted when the date changed. Does not trigger when time is changed, use {@link #event_timeChange|"timeChange"} to handle it
     * @event
@@ -1718,12 +1720,14 @@ class DateRangePicker {
       // ie modal dialog fix
       e.type === "focusin" || closest2(target, this.element) || closest2(target, this.container) || target.closest(".calendar-table")
     ) return;
+    const event = this.triggerEvent(this.#events.onOutsideClick);
+    if (event.defaultPrevented)
+      return;
     if (this.onOutsideClick === "cancel") {
       this.#startDate = this.oldStartDate;
       this.#endDate = this.oldEndDate;
     }
     this.hide();
-    this.triggerEvent(this.#events.onOutsideClick);
   }
   /**
   * Move calendar to previous month