daterangepicker-4.x 4.10.0 → 4.11.2

package/README.md

@@ -18,8 +18,8 @@ Above samples are based on the [original repository](https://github.com/dangross
 ```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/daterangepicker-4.x@4.10.0/daterangepicker.min.js"></script>
-<link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.10.0/daterangepicker.min.css" rel="stylesheet" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.11.2/daterangepicker.min.js"></script>
+<link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.11.2/daterangepicker.min.css" rel="stylesheet" />
 
 <input type="text" id="daterange" />
 
@@ -96,6 +96,7 @@ Compared to [inital repository](https://github.com/dangrossman/daterangepicker),
 - Added events `dateChange.daterangepicker` and `timeChange.daterangepicker` emitted when user clicks on a date/time
 - Added event `beforeHide.daterangepicker` enables you to keep the picker visible after click on `Apply` or `Cancel` button.
 - Added event `beforeRenderTimePicker.daterangepicker` and `beforeRenderCalendar.daterangepicker` emitted before elements are rendered
+- Added event `violated.daterangepicker` emitted when user input is not valid
 - Added method `setRange(startDate, endDate)` to combine `setStartDate(startDate)` and `setEndDate(endDate)`
 - Added option `minSpan` similar to `maxSpan`
 - Added option `isInvalidTime` similar to `isInvalidDate`
@@ -616,8 +617,9 @@ Options for DateRangePicker
 | endDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> |  | Defautl: `DateTime.now().endOf('day')`<br/>The end date of the initially selected date range.<br/> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br/> Date value is rounded to match option `timePickerStepSize`<br/> Option `isInvalidDate`, `isInvalidTime` and `minSpan`, `maxSpan` are not evaluated, you may set date/time which is not selectable in calendar.<br/> If the date does not fall into `minDate` and `maxDate` then date is shifted and a warning is written to console.<br/> |
 | minDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | The earliest date a user may select or `null` for no limit.<br/> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`. |
 | maxDate | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | The latest date a user may select or `null` for no limit.<br/> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`. |
-| minSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The maximum span between the selected start and end dates.<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br/> Ignored when `singleDatePicker: true` |
-| maxSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The minimum span between the selected start and end dates.<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br/> Ignored when `singleDatePicker: true` |
+| minSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The minimum span between the selected start and end dates.<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br/> Ignored when `singleDatePicker: true` |
+| maxSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The maximum  span between the selected start and end dates.<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br/> Ignored when `singleDatePicker: true` |
+| defaultSpan | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> \| <code>number</code> \| <code>null</code> |  | The span which is used when endDate is automatically updated due to wrong user input<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) duration.<br/> Ignored when `singleDatePicker: true`. Not relevant if `minSpan: null` |
 | initalMonth | [<code>DateTime</code>](https://moment.github.io/luxon/api-docs/index.html#datetime) \| [<code>Date</code>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) \| <code>string</code> \| <code>null</code> |  | Default: `DateTime.now().startOf('month')`<br/> The inital month shown when `startDate: null`. Be aware, the attached `<input>` element must be also empty.<br/> Must be a `luxon.DateTime` or `Date` or `string` according to [ISO-8601](https://en.wikipedia.org/wiki/ISO_8601) or a string matching `locale.format`.<br/> When `initalMonth` is used, then `endDate` is ignored and it works only with `timePicker: false` |
 | autoApply | <code>boolean</code> | <code>false</code> | Hide the `Apply` and `Cancel` buttons, and automatically apply a new date range as soon as two dates are clicked.<br/> Only useful when `timePicker: false` |
 | singleDatePicker | <code>boolean</code> | <code>false</code> | Show only a single calendar to choose one date, instead of a range picker with two calendars.<br/> The start and end dates provided to your callback will be the same single date chosen. |

package/daterangepicker.js

@@ -55,12 +55,15 @@
         * Must be a `luxon.DateTime` or `Date` or `string` according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} or a string matching `locale.format`.
         * @property {external:DateTime|external:Date|string|null} maxDate - The latest date a user may select or `null` for no limit.<br/>
         * Must be a `luxon.DateTime` or `Date` or `string` according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} or a string matching `locale.format`.
-        * @property {external:Duration|string|number|null} minSpan - The maximum span between the selected start and end dates.<br/>
+        * @property {external:Duration|string|number|null} minSpan - The minimum span between the selected start and end dates.<br/>
         * Must be a `luxon.Duration` or number of seconds or a string according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} duration.<br/>
         * Ignored when `singleDatePicker: true`
-        * @property {external:Duration|string|number|null} maxSpan - The minimum span between the selected start and end dates.<br/>
+        * @property {external:Duration|string|number|null} maxSpan - The maximum  span between the selected start and end dates.<br/>
         * Must be a `luxon.Duration` or number of seconds or a string according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} duration.<br/>
         * Ignored when `singleDatePicker: true`
+        * @property {external:Duration|string|number|null} defaultSpan - The span which is used when endDate is automatically updated due to wrong user input<br/>
+        * Must be a `luxon.Duration` or number of seconds or a string according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} duration.<br/>
+        * Ignored when `singleDatePicker: true`. Not relevant if `minSpan: null`
         * @property {external:DateTime|external:Date|string|null} initalMonth - Default: `DateTime.now().startOf('month')`<br/>
         * The inital month shown when `startDate: null`. Be aware, the attached `<input>` element must be also empty.<br/>
         * Must be a `luxon.DateTime` or `Date` or `string` according to {@link https://en.wikipedia.org/wiki/ISO_8601|ISO-8601} or a string matching `locale.format`.<br/>
@@ -204,6 +207,7 @@
         this.maxDate = null;
         this.maxSpan = null;
         this.minSpan = null;
+        this.defaultSpan = null;
         this.initalMonth = DateTime.now().startOf('month');
         this.autoApply = false;
         this.singleDatePicker = false;
@@ -386,7 +390,7 @@
         }
 
         if (!this.singleDatePicker) {
-            for (let opt of ['minSpan', 'maxSpan']) {
+            for (let opt of ['minSpan', 'maxSpan', 'defaultSpan']) {
                 if (['string', 'number', 'object'].includes(typeof options[opt])) {
                     if (options[opt] instanceof Duration && options[opt].isValid) {
                         this[opt] = options[opt];
@@ -406,6 +410,13 @@
                 this.maxSpan = null;
                 console.warn(`Ignore option 'minSpan' and 'maxSpan', because 'minSpan' must be smaller than 'maxSpan'`);
             }
+            if (this.defaultSpan && this.minSpan && this.minSpan > this.defaultSpan) {
+                this.defaultSpan = null;
+                console.warn(`Ignore option 'defaultSpan', because 'defaultSpan' must be greater than 'minSpan'`);
+            } else if (this.defaultSpan && this.maxSpan && this.maxSpan < this.defaultSpan) {
+                this.defaultSpan = null;
+                console.warn(`Ignore option 'defaultSpan', because 'defaultSpan' must be smaller than 'maxSpan'`);
+            }
         }
 
         if (this.timePicker) {
@@ -1025,7 +1036,7 @@
 
             if (this.minSpan) {
                 // If the endDate falls below those allowed by the minSpan option, expand the range to the allowable period.
-                const minDate = startDate.plus(this.minSpan);
+                const minDate = startDate.plus(this.defaultSpan ?? this.minSpan);
                 if (endDate < minDate) {
                     violation = { old: endDate, reason: 'minSpan' };
                     while (endDate < minDate)
@@ -1448,7 +1459,7 @@
                 maxDate = this.startDate.plus(this.maxSpan);
 
             if (this.minSpan && side === 'end')
-                minLimit = this.startDate.plus(this.minSpan);
+                minLimit = this.startDate.plus(this.defaultSpan ?? this.minSpan);
 
             if (side === 'start') {
                 selected = this.startDate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daterangepicker-4.x",
-  "version": "4.10.0",
+  "version": "4.11.2",
   "description": "Date range picker with time component and pre-defined ranges",
   "main": "daterangepicker.js",
   "style": "daterangepicker.css",