daterangepicker-4.x 4.1.6 → 4.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,146 +1,149 @@
1
- # Date Range Picker
2
-
3
- ![Improvely.com](https://i.imgur.com/UTRlaar.png)
4
-
5
- This date range picker component creates a dropdown menu from which a user can
6
- select a range of dates.
7
-
8
- Features include limiting the selectable date range, localizable strings and date formats,
9
- a single date picker mode, a time picker, and predefined date ranges.
10
-
11
- ### [Documentation and Live Usage Examples](http://www.daterangepicker.com)
12
-
13
- ### [See It In a Live Application](https://awio.iljmp.com/5/drpdemogh)
14
-
15
- Above samples are based on the [original repository](https://github.com/dangrossman/daterangepicker) from Dan Grossman. [New features](#Features) from this fork are not available in these samples.
16
-
17
- ## Basic usage
18
- ```html
19
- <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
20
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
21
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@latest/daterangepicker.min.js"></script>
22
- <link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@latest/daterangepicker.min.css" rel="stylesheet" />
23
-
24
- <input type="text" id="daterange" />
25
-
26
- <script>
27
- $(function() {
28
- const options = {
29
- timePicker: true
30
- }
31
- $('#daterange').daterangepicker(options);
32
- });
33
-
34
- ```
35
-
36
- ## Examples
37
- ### `ranges`
38
- <a name="options-ranges"></a>
39
- ```js
40
- {
41
- 'Today': [DateTime.now().startOf('day'), DateTime.now().endOf('day')],
42
- 'Yesterday': [DateTime.now().startOf('day').minus({day: 1}), DateTime.now().endOf('day').minus({day: 1})],
43
- 'Last 7 Days': ['2025-03-01', '2025-03-07'],
44
- 'Last 30 Days': [new Date(new Date - 1000*60*60*24*30), new Date()],
45
- 'This Month': [DateTime.now().startOf('month'), DateTime.now().endOf('month')],
46
- 'Last Month': [DateTime.now().minus({month: 1}).startOf('month'), DateTime.now().minus({month: 1}).endOf('month')]
47
- }
48
- ```
49
-
50
- ### `isInvalidDate`
51
- ```js
52
- isInvalidDate: function(date) {
53
- return date.isWeekend;
54
- }
55
- ```
56
-
57
- ### `isInvalidTime`
58
- ```js
59
- const validRange = [DateTime.fromSQL('2025-03-01 11:30'), DateTime.fromSQL('2025-04-21 18:30')];
60
-
61
- isInvalidTime: (time, side, unit) => {
62
- if (side == 'start' && time.hasSame(validRange[0], 'day')) {
63
- if (unit == 'hour') {
64
- return time.hour < validRange[0].hour;
65
- } else {
66
- return time.hasSame(validRange[0], 'hour') ? time.minute < validRange[0].minute : false;
67
- }
68
- } else if (side == 'end' && t.hasSame(validRange[1], 'day')) {
69
- if (unit == 'hour') {
70
- return time.hour > validRange[1].hour;
71
- } else {
72
- return time.hasSame(validRange[1], 'hour') ? time.minute > validRange[1].minute : false;
73
- }
74
- } else {
75
- return false;
76
- }
77
- }
78
- ```
79
-
80
- ### `isCustomDate`
81
- ```js
82
- .daterangepicker-bank-day {
83
- color: red;
84
- }
85
- .daterangepicker-weekend-day {
86
- color: blue;
87
- }
88
-
89
- isInvalidDate: function(date) {
90
- if (date.isWeekend)
91
- return 'daterangepicker-weekend-day';
92
-
93
- const yyyy = date.year;
94
- let bankDays = [
95
- DateTime.fromObject({ year: yyyy, month: 1, day: 1 }), // New year
96
- DateTime.fromObject({ year: yyyy, month: 7, day: 4 }), // Independence Day
97
- DateTime.fromObject({ year: yyyy, month: 12, day: 25 }) // Christmas Day
98
- ];
99
- return bankDays.some(x => x.hasSame(date, 'day')) ? 'daterangepicker-bank-day' : '';
100
- }
101
- ```
102
- ### Features
103
- Compared to [inital repository](https://github.com/dangrossman/daterangepicker), this fork added following features:
104
-
105
- - Added CSS class `weekend-day` for weekend days in calendar
106
- - Added option `timePickerStepSize` to succeed options `timePickerIncrement` and `timePickerSeconds`
107
- - Added events for `dateChange.daterangepicker` and `timeChange.daterangepicker`
108
- - Added method `setRange` to combine `setStartDate` and `setEndDate`
109
- - Added option `minSpan` similar to `maxSpan`
110
- - Added option `isInvalidTime` similar to `isInvalidDate`
111
- - Added option `onOutsideClick` where you can define whether picker shall apply or revert selected value
112
- - Replaced [moment](https://momentjs.com/) by [luxon](https://moment.github.io/luxon/index.html)
113
- - Better validation of input parameters, error are logged to console
114
- - Highlight range in calendar when hovering over pre-defined ranges
115
- - Added option `locale.durationFormat` to show customized label for selected duration, e.g. `'4 Days, 6 Hours, 30 Minutes'`
116
- - ... and maybe some new bugs 😉
117
-
118
- ### Differences between `moment` and `luxon` library
119
- This table lists a few important differences between datarangepicker using moment and luxon. Check them carefully when you migrate from older daterangepicker.
120
-
121
- | Parameter | moment | luxon |
122
- | ----------------------- | --------------------------------------------------- | ----------------- |
123
- | `locale.daysOfWeek` | [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] | [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] |
124
- | `locale.firstDay` | 0-6 (Sunday to Saturday) | 1 for Monday through 7 for Sunday |
125
- | to ISO-8601 String | `toISOString()` | `toISO()` |
126
- | to [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) Object | `toDate()` | `toJSDate()` |
127
- | from ISO-8601 String | `moment(...)` | `DateIme.fromISO(...)` |
128
- | from [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) Object | `moment(...)` | `DateIme.fromJSDate(...)` |
129
- | current day | `moment()` | `DateTime.now()` |
130
- | format to string | `format(...)`` | `toFormat(...)` |
131
- | format tokens | `'YYYY-MM-DD'` | `'yyyy-MM-dd'` |
132
-
133
-
134
- ## License
135
-
136
- The MIT License (MIT)
137
-
138
- Copyright (c) 2012-2019 Dan Grossman<br/>
139
- Copyright (c) 2025 Wernfried Domscheit
140
-
141
- Licensed under the [MIT license](LICENSE).
142
-
143
- # API Documentation
1
+ # Date Range Picker
2
+
3
+ ![Improvely.com](https://i.imgur.com/UTRlaar.png)
4
+
5
+ This date range picker component creates a dropdown menu from which a user can
6
+ select a range of dates.
7
+
8
+ Features include limiting the selectable date range, localizable strings and date formats,
9
+ a single date picker mode, a time picker, and predefined date ranges.
10
+
11
+ ### [Documentation and Live Usage Examples](http://www.daterangepicker.com)
12
+
13
+ ### [See It In a Live Application](https://awio.iljmp.com/5/drpdemogh)
14
+
15
+ Above samples are based on the [original repository](https://github.com/dangrossman/daterangepicker) from Dan Grossman. [New features](#Features) from this fork are not available in these samples.
16
+
17
+ ## Basic usage
18
+ ```html
19
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
20
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
21
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.1.8/daterangepicker.min.js"></script>
22
+ <link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.1.8/daterangepicker.min.css" rel="stylesheet" />
23
+
24
+ <input type="text" id="daterange" />
25
+
26
+ <script>
27
+ $(function() {
28
+ const options = {
29
+ timePicker: true
30
+ }
31
+ $('#daterange').daterangepicker(options);
32
+ });
33
+
34
+ ```
35
+
36
+ ## Examples
37
+ ### `ranges`
38
+ <a name="options-ranges"></a>
39
+ ```js
40
+ {
41
+ 'Today': [DateTime.now().startOf('day'), DateTime.now().endOf('day')],
42
+ 'Yesterday': [DateTime.now().startOf('day').minus({day: 1}), DateTime.now().endOf('day').minus({day: 1})],
43
+ 'Last 7 Days': ['2025-03-01', '2025-03-07'],
44
+ 'Last 30 Days': [new Date(new Date - 1000*60*60*24*30), new Date()],
45
+ 'This Month': [DateTime.now().startOf('month'), DateTime.now().endOf('month')],
46
+ 'Last Month': [DateTime.now().minus({month: 1}).startOf('month'), DateTime.now().minus({month: 1}).endOf('month')]
47
+ }
48
+ ```
49
+
50
+ ### `isInvalidDate`
51
+ ```js
52
+ isInvalidDate: function(date) {
53
+ return date.isWeekend;
54
+ }
55
+ ```
56
+
57
+ ### `isInvalidTime`
58
+ ```js
59
+ const validRange = [DateTime.fromSQL('2025-03-01 11:30'), DateTime.fromSQL('2025-04-21 18:30')];
60
+
61
+ isInvalidTime: (time, side, unit) => {
62
+ if (side == 'start' && time.hasSame(validRange[0], 'day')) {
63
+ if (unit == 'hour') {
64
+ return time.hour < validRange[0].hour;
65
+ } else {
66
+ return time.hasSame(validRange[0], 'hour') ? time.minute < validRange[0].minute : false;
67
+ }
68
+ } else if (side == 'end' && t.hasSame(validRange[1], 'day')) {
69
+ if (unit == 'hour') {
70
+ return time.hour > validRange[1].hour;
71
+ } else {
72
+ return time.hasSame(validRange[1], 'hour') ? time.minute > validRange[1].minute : false;
73
+ }
74
+ } else {
75
+ return false;
76
+ }
77
+ }
78
+ ```
79
+
80
+ ### `isCustomDate`
81
+ ```js
82
+ .daterangepicker-bank-day {
83
+ color: red;
84
+ }
85
+ .daterangepicker-weekend-day {
86
+ color: blue;
87
+ }
88
+
89
+ isInvalidDate: function(date) {
90
+ if (date.isWeekend)
91
+ return 'daterangepicker-weekend-day';
92
+
93
+ const yyyy = date.year;
94
+ let bankDays = [
95
+ DateTime.fromObject({ year: yyyy, month: 1, day: 1 }), // New year
96
+ DateTime.fromObject({ year: yyyy, month: 7, day: 4 }), // Independence Day
97
+ DateTime.fromObject({ year: yyyy, month: 12, day: 25 }) // Christmas Day
98
+ ];
99
+ return bankDays.some(x => x.hasSame(date, 'day')) ? 'daterangepicker-bank-day' : '';
100
+ }
101
+ ```
102
+ ### Features
103
+ Compared to [inital repository](https://github.com/dangrossman/daterangepicker), this fork added following features and changes:
104
+
105
+ - Replaced [moment](https://momentjs.com/) by [luxon](https://moment.github.io/luxon/index.html) (see differences below)
106
+ - Added CSS class `weekend-day` for weekend days in calendar
107
+ - Added option `timePickerStepSize` to succeed options `timePickerIncrement` and `timePickerSeconds`
108
+ - Added events `dateChange.daterangepicker` and `timeChange.daterangepicker` emitted when user clicks on a date/time
109
+ - Added event `beforeHide.daterangepicker` enables you to keep the picker visible after click on `Apply` or `Cancel` button.
110
+ - Added method `setRange(startDate, endDate)` to combine `setStartDate(startDate)` and `setEndDate(endDate)`
111
+ - Added option `minSpan` similar to `maxSpan`
112
+ - Added option `isInvalidTime` similar to `isInvalidDate`
113
+ - Added option `onOutsideClick` where you can define whether picker shall apply or revert selected value
114
+ - Better validation of input parameters, errors are logged to console
115
+ - Highlight range in calendar when hovering over pre-defined ranges
116
+ - Option `autoUpdateInput` defines whether the attached `<input>` element is updated when the user clicks on a date value.<br/>
117
+ In original daterangepicker this parameter defines whether the `<input>` is updated when the user clicks on `Apply` button.
118
+ - Added option `locale.durationFormat` to show customized label for selected duration, e.g. `'4 Days, 6 Hours, 30 Minutes'`
119
+ - ... and maybe some new bugs 😉
120
+
121
+ ### Differences between `moment` and `luxon` library
122
+ This table lists a few important differences between datarangepicker using moment and luxon. Check them carefully when you migrate from older daterangepicker.
123
+
124
+ | Parameter | moment | luxon |
125
+ | ----------------------- | --------------------------------------------------- | ----------------- |
126
+ | `locale.daysOfWeek` | [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ] | [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] |
127
+ | `locale.firstDay` | 0-6 (Sunday to Saturday) | 1 for Monday through 7 for Sunday |
128
+ | to ISO-8601 String | `toISOString()` | `toISO()` |
129
+ | to [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) Object | `toDate()` | `toJSDate()` |
130
+ | from ISO-8601 String | `moment(...)` | `DateIme.fromISO(...)` |
131
+ | from [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) Object | `moment(...)` | `DateIme.fromJSDate(...)` |
132
+ | current day | `moment()` | `DateTime.now()` |
133
+ | format to string | `format(...)` | `toFormat(...)` |
134
+ | format tokens | `'YYYY-MM-DD'` | `'yyyy-MM-dd'` |
135
+
136
+
137
+ ## License
138
+
139
+ The MIT License (MIT)
140
+
141
+ Copyright (c) 2012-2019 Dan Grossman<br/>
142
+ Copyright (c) 2025 Wernfried Domscheit
143
+
144
+ Licensed under the [MIT license](LICENSE).
145
+
146
+ # API Documentation
144
147
  ## Classes
145
148
 
146
149
  <dl>
@@ -485,7 +488,7 @@ Options for DateRangePicker
485
488
  | timePickerStepSize | [<code>Duration</code>](https://moment.github.io/luxon/api-docs/index.html#duration) \| <code>string</code> | | Default: `Duration.fromObject({minutes:1})`<br/>Set the time picker step size.<br/> Must be a `luxon.Duration` or number of seconds or a string according to [ISO-8601](ISO-8601) duration.<br/> Valid values are 1,2,3,4,5,6,10,12,15,20,30 for `Duration.fromObject({seconds: ...})` and `Duration.fromObject({minutes: ...})` and 1,2,3,4,6,(8,12) for `Duration.fromObject({hours: ...})`.<br/> Duration must be greater than `minSpan` and smaller than `maxSpan`.<br/> For example `timePickerStepSize: 600` will disable time picker seconds and time picker minutes are set to step size of 10 Minutes.<br/> Overwrites #timePickerIncrement and #timePickerSeconds |
486
489
  | timePickerSeconds | <code>boolean</code> | <code>boolean</code> | **Deprecated**, use `timePickerStepSize`<br/>Show seconds in the timePicker |
487
490
  | timePickerIncrement | <code>boolean</code> | <code>1</code> | **Deprecated**, use `timePickerStepSize`<br/>Increment of the minutes selection list for times |
488
- | autoUpdateInput | <code>boolean</code> | <code>true</code> | Indicates whether the date range picker should automatically update the value of the `<input>` element it's attached to at initialization and when the selected dates change.<br/>Value is reverted when use clicks on `Cancel`. |
491
+ | autoUpdateInput | <code>boolean</code> | <code>true</code> | Indicates whether the date range picker should instantly update the value of the attached `<input>` element when the selected dates change.<br/>The `<input>` element will be always updated on `Apply` and reverted when user clicks on `Cancel`. |
489
492
  | onOutsideClick | <code>string</code> | <code>&quot;none&quot;</code> | Defines what picker shall do when user clicks outside the calendar. `'apply'` or `'cancel'`. Event [onOutsideClick.daterangepicker](#event_outsideClick.daterangepicker) is always emitted. |
490
493
  | linkedCalendars | <code>boolean</code> | <code>true</code> | When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars.<br/> When disabled, the two calendars can be individually advanced and display any month/year |
491
494
  | isInvalidDate | <code>function</code> | <code>false</code> | A function that is passed each date in the two calendars before they are displayed,<br/> and may return `true` or `false` to indicate whether that date should be available for selection or not.<br/> Signature: `isInvalidDate(date)` Function has no effect on date values set by `startDate`, `endDate`, `ranges`, [setStartDate](#DateRangePicker+setStartDate), [setEndDate](#DateRangePicker+setEndDate). |
@@ -83,8 +83,8 @@
83
83
  * @property {boolean} timePickerSeconds=boolean - **Deprecated**, use `timePickerStepSize`<br/>Show seconds in the timePicker
84
84
  * @property {boolean} timePickerIncrement=1 - **Deprecated**, use `timePickerStepSize`<br/>Increment of the minutes selection list for times
85
85
 
86
- * @property {boolean} autoUpdateInput=true - Indicates whether the date range picker should automatically update the value of the `<input>`
87
- * element it's attached to at initialization and when the selected dates change.<br/>Value is reverted when use clicks on `Cancel`.
86
+ * @property {boolean} autoUpdateInput=true - Indicates whether the date range picker should instantly update the value of the attached `<input>`
87
+ * element when the selected dates change.<br/>The `<input>` element will be always updated on `Apply` and reverted when user clicks on `Cancel`.
88
88
  * @property {string} onOutsideClick=none - Defines what picker shall do when user clicks outside the calendar.
89
89
  * `'apply'` or `'cancel'`. Event {@link #event_outsideClick.daterangepicker|onOutsideClick.daterangepicker} is always emitted.
90
90
  * @property {boolean} linkedCalendars=true - When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February),
@@ -1158,11 +1158,13 @@
1158
1158
  }
1159
1159
  calendar[row][col] = theDate.set(time);
1160
1160
 
1161
- if (this.minDate && calendar[row][col].hasSame(this.minDate, 'month') && calendar[row][col] < this.minDate && side == 'left')
1161
+ // I have no clue why and how this shall be used in original code. Skip it, maybe I will find out later
1162
+ /*if (this.minDate && calendar[row][col].hasSame(this.minDate, 'month') && calendar[row][col] < this.minDate && side == 'left')
1162
1163
  calendar[row][col] = this.minDate;
1163
1164
 
1164
1165
  if (this.maxDate && calendar[row][col].hasSame(this.maxDate, 'month') && calendar[row][col] > this.maxDate && side == 'right')
1165
1166
  calendar[row][col] = this.maxDate;
1167
+ */
1166
1168
  }
1167
1169
 
1168
1170
  //make the calendar object available to hoverDate/clickDate
@@ -1324,7 +1326,7 @@
1324
1326
  if (!classes.includes('disabled'))
1325
1327
  classes.push('available');
1326
1328
 
1327
- html += `<td class="${classes.join(' ')}" data-title="r${row}c${col}" data-date="${calendar[row][col].toISODate()}">${calendar[row][col].day}</td>`;
1329
+ html += `<td class="${classes.join(' ')}" data-title="r${row}c${col}">${calendar[row][col].day}</td>`;
1328
1330
 
1329
1331
  }
1330
1332
  html += '</tr>';
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "daterangepicker-4.x",
3
- "version": "4.1.6",
4
- "description": "Date range picker component for Bootstrap",
3
+ "version": "4.1.8",
4
+ "description": "Date range picker with time component and pre-defined ranges",
5
5
  "main": "daterangepicker.js",
6
6
  "style": "daterangepicker.css",
7
7
  "scripts": {
8
- "prepack": "sed -i '/# API Documentation/q' README.md",
8
+ "postversion": "sed -bi -e 's/daterangepicker-4.x@4\\.[0-9]\\+\\.[0-9]\\+/daterangepicker-4.x@%npm_package_version%/' README.md",
9
+ "prepack": "sed -bi '/# API Documentation/q' README.md",
9
10
  "prepare": "jsdoc2md --EOL win32 --example-lang js daterangepicker.js >> README.md",
10
11
  "postpack": "git commit -a -m \"Updated README.md\""
11
12
  },
@@ -20,6 +21,20 @@
20
21
  "name": "wernfried Domscheit",
21
22
  "url": "https://www.domscheit.ch"
22
23
  },
24
+ "keywords": [
25
+ "daterangepicker",
26
+ "html",
27
+ "date",
28
+ "time",
29
+ "datepicker",
30
+ "timepicker",
31
+ "rangepicker",
32
+ "calendar"
33
+ ],
34
+ "files": [
35
+ "daterangepicker.js",
36
+ "daterangepicker.css"
37
+ ],
23
38
  "license": "MIT",
24
39
  "bugs": {
25
40
  "url": "https://github.com/wernfried/daterangepicker/issues"
package/bower.json DELETED
@@ -1,20 +0,0 @@
1
- {
2
- "name": "daterangepicker",
3
- "main": [
4
- "daterangepicker.js",
5
- "daterangepicker.css"
6
- ],
7
- "ignore": [
8
- "**/.*",
9
- "node_modules",
10
- "bower_components",
11
- "test",
12
- "tests",
13
- "moment.js",
14
- "moment.min.js"
15
- ],
16
- "dependencies": {
17
- "jquery": "1.9.1 - 3",
18
- "moment": ">=2.9.0"
19
- }
20
- }