daterangepicker-4.x 4.4.1 → 4.4.3

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.
Files changed (3) hide show
  1. package/README.md +39 -8
  2. package/daterangepicker.js +14 -7
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -18,8 +18,8 @@ Above samples are based on the [original repository](https://github.com/dangross
18
18
  ```html
19
19
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
20
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.4.1/daterangepicker.min.js"></script>
22
- <link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.4.1/daterangepicker.min.css" rel="stylesheet" />
21
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.4.3/daterangepicker.min.js"></script>
22
+ <link type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker-4.x@4.4.3/daterangepicker.min.css" rel="stylesheet" />
23
23
 
24
24
  <input type="text" id="daterange" />
25
25
 
@@ -30,7 +30,7 @@ $(function() {
30
30
  }
31
31
  $('#daterange').daterangepicker(options);
32
32
  });
33
-
33
+ </script>
34
34
  ```
35
35
 
36
36
  ## Examples
@@ -107,6 +107,37 @@ In original daterangepicker this parameter defines whether the `<input>` is upda
107
107
  - Added option `locale.durationFormat` to show customized label for selected duration, e.g. `'4 Days, 6 Hours, 30 Minutes'`
108
108
  - ... and maybe some new bugs 😉
109
109
 
110
+ ### Localization
111
+ 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:
112
+ ```
113
+ $(document).ready(function () {
114
+ const Settings = luxon.Settings;
115
+ Settings.defaultLocale = 'fr-CA'
116
+
117
+ $('#picker').daterangepicker({
118
+ timePicker: true,
119
+ singleDatePicker: false
120
+ };
121
+ });
122
+
123
+ ```
124
+ instead of
125
+ ```
126
+ $(document).ready(function () {
127
+ $('#picker').daterangepicker({
128
+ timePicker: true,
129
+ singleDatePicker: false,
130
+ locale: {
131
+ format: 'yyyyy-M-d H h m',
132
+ daysOfWeek: [ 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.', 'dim.' ],
133
+ monthNames: [ "janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre" ],
134
+ firstDay: 7
135
+ }
136
+ };
137
+ });
138
+
139
+ ```
140
+
110
141
  ## Methods
111
142
 
112
143
  Available methods are listed below in [API documentation](#DateRangePicker). You will mainly use
@@ -130,7 +161,7 @@ This table lists a few important differences between datarangepicker using momen
130
161
  | from ISO-8601 String | `moment(...)` | `DateIme.fromISO(...)` |
131
162
  | from [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) Object | `moment(...)` | `DateIme.fromJSDate(...)` |
132
163
  | current day | `moment()` | `DateTime.now()` |
133
- | format to string | `format(...)` | `toFormat(...)` |
164
+ | format to string | `format(...)` | `toFormat(...)` |
134
165
  | format tokens | `'YYYY-MM-DD'` | `'yyyy-MM-dd'` |
135
166
 
136
167
 
@@ -546,8 +577,8 @@ Options for DateRangePicker
546
577
  | applyButtonClasses | <code>string</code> | <code>&quot;btn-primary&quot;</code> | CSS class names that will be added only to the apply button |
547
578
  | cancelButtonClasses | <code>string</code> | <code>&quot;btn-default&quot;</code> | CSS class names that will be added only to the cancel button |
548
579
  | buttonClasses | <code>string</code> | | Default: `'btn btn-sm'`<br/>CSS class names that will be added to both the apply and cancel buttons. |
549
- | weekendClasses | <code>string</code> | <code>&quot;weekend&quot;</code> | CSS class names that will be used to highlight weekend (Saturday+Sunday) days.<br/> Use `null` or empty string if you don't like to highlight weekend days. |
550
- | weekendDayClasses | <code>string</code> | <code>&quot;weekend-day&quot;</code> | CSS class names that will be used to highlight weekend (Saturday+Sunday) day names.<br/> Use `null` or empty string if you don't like to highlight weekend day names. |
580
+ | weekendClasses | <code>string</code> | <code>&quot;weekend&quot;</code> | CSS class names that will be used to highlight weekend days.<br/> Use `null` or empty string if you don't like to highlight weekend days. |
581
+ | weekendDayClasses | <code>string</code> | <code>&quot;weekend-day&quot;</code> | CSS class names that will be used to highlight weekend day names.<br/> Weekend days are evaluated by [Info.getWeekendWeekdays](https://moment.github.io/luxon/api-docs/index.html#infogetweekendweekdays) and depend on current locale settings. Use `null` or empty string if you don't like to highlight weekend day names. |
551
582
  | todayClasses | <code>string</code> | <code>&quot;today&quot;</code> | CSS class names that will be used to highlight the current day.<br/> Use `null` or empty string if you don't like to highlight the current day. |
552
583
  | opens | <code>string</code> | <code>&quot;right&quot;</code> | Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to.<br/> `'left' \| 'right' \| 'center'` |
553
584
  | drops | <code>string</code> | <code>&quot;down&quot;</code> | Whether the picker appears below or above the HTML element it's attached to.<br/> `'down' \| 'up' \| 'auto'` |
@@ -556,10 +587,10 @@ Options for DateRangePicker
556
587
  | alwaysShowCalendars | <code>boolean</code> | <code>false</code> | Normally, if you use the ranges option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range".<br/> When this option is set to true, the calendars for choosing a custom date range are always shown instead. |
557
588
  | locale | <code>object</code> | <code>{}</code> | Allows you to provide localized strings for buttons and labels, customize the date format, and change the first day of week for the calendars. |
558
589
  | locale.direction | <code>string</code> | <code>&quot;ltr&quot;</code> | Direction of reading, `'ltr'` or `'rtl'` |
559
- | locale.format | <code>object</code> \| <code>string</code> | | Default: `DateTime.DATE_SHORT`<br/>Date formats. Either given as string, see [Format Tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or an object according to [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)<br/> I recommend to use the luxon [Presets](https://moment.github.io/luxon/#/formatting?id=presets). |
590
+ | locale.format | <code>object</code> \| <code>string</code> | | Default: `DateTime.DATE_SHORT` or `DateTime.DATETIME_SHORT` when `timePicker: true`<br/>Date formats. Either given as string, see [Format Tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or an object according to [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)<br/> I recommend to use the luxon [Presets](https://moment.github.io/luxon/#/formatting?id=presets). |
560
591
  | locale.separator | <code>string</code> | | Defaut: `' - '`<br/>Separator for start and end time |
561
592
  | locale.weekLabel | <code>string</code> | <code>&quot;W&quot;</code> | Label for week numbers |
562
- | locale.daysOfWeek | <code>Array</code> | | Default: `luxon.weekdays('short')`<br/>Array with weekday names, from Monday to Sunday |
593
+ | locale.daysOfWeek | <code>Array</code> | | Default: `luxon.Info.weekdays('short')`<br/>Array with weekday names, from Monday to Sunday |
563
594
  | locale.monthNames | <code>Array</code> | | Default: `luxon.Info.months('long')`<br/>Array with month names |
564
595
  | locale.firstDay | <code>number</code> | | Default: `luxon.Info.getStartOfWeek()`<br/>First day of the week, 1 for Monday through 7 for Sunday |
565
596
  | locale.applyLabel | <code>string</code> | <code>&quot;Apply&quot;</code> | Label of `Apply` Button |
package/daterangepicker.js CHANGED
@@ -114,9 +114,11 @@
114
114
  * @property {string} applyButtonClasses=btn-primary - CSS class names that will be added only to the apply button
115
115
  * @property {string} cancelButtonClasses=btn-default - CSS class names that will be added only to the cancel button
116
116
  * @property {string} buttonClasses - Default: `'btn btn-sm'`<br/>CSS class names that will be added to both the apply and cancel buttons.
117
- * @property {string} weekendClasses=weekend - CSS class names that will be used to highlight weekend (Saturday+Sunday) days.<br/>
117
+ * @property {string} weekendClasses=weekend - CSS class names that will be used to highlight weekend days.<br/>
118
118
  * Use `null` or empty string if you don't like to highlight weekend days.
119
- * @property {string} weekendDayClasses=weekend-day - CSS class names that will be used to highlight weekend (Saturday+Sunday) day names.<br/>
119
+ * @property {string} weekendDayClasses=weekend-day - CSS class names that will be used to highlight weekend day names.<br/>
120
+ * Weekend days are evaluated by [Info.getWeekendWeekdays](https://moment.github.io/luxon/api-docs/index.html#infogetweekendweekdays) and depend on current
121
+ * locale settings.
120
122
  * Use `null` or empty string if you don't like to highlight weekend day names.
121
123
  * @property {string} todayClasses=today - CSS class names that will be used to highlight the current day.<br/>
122
124
  * Use `null` or empty string if you don't like to highlight the current day.
@@ -138,13 +140,13 @@
138
140
  * @property {object} locale={} - Allows you to provide localized strings for buttons and labels, customize the date format,
139
141
  * and change the first day of week for the calendars.
140
142
  * @property {string} locale.direction=ltr - Direction of reading, `'ltr'` or `'rtl'`
141
- * @property {object|string} locale.format - Default: `DateTime.DATE_SHORT`<br/>Date formats. Either given as string,
142
- * see [Format Tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or an object according
143
+ * @property {object|string} locale.format - Default: `DateTime.DATE_SHORT` or `DateTime.DATETIME_SHORT` when `timePicker: true`<br/>Date formats.
144
+ * Either given as string, see [Format Tokens](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) or an object according
143
145
  * to [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)<br/>
144
146
  * I recommend to use the luxon [Presets](https://moment.github.io/luxon/#/formatting?id=presets).
145
147
  * @property {string} locale.separator - Defaut: `' - '`<br/>Separator for start and end time
146
148
  * @property {string} locale.weekLabel=W - Label for week numbers
147
- * @property {Array} locale.daysOfWeek - Default: `luxon.weekdays('short')`<br/>Array with weekday names, from Monday to Sunday
149
+ * @property {Array} locale.daysOfWeek - Default: `luxon.Info.weekdays('short')`<br/>Array with weekday names, from Monday to Sunday
148
150
  * @property {Array} locale.monthNames - Default: `luxon.Info.months('long')`<br/>Array with month names
149
151
  * @property {number} locale.firstDay - Default: `luxon.Info.getStartOfWeek()`<br/>First day of the week, 1 for Monday through 7 for Sunday
150
152
  * @property {string} locale.applyLabel=Apply - Label of `Apply` Button
@@ -222,7 +224,7 @@
222
224
 
223
225
  this.locale = {
224
226
  direction: 'ltr',
225
- format: DateTime.DATE_SHORT,
227
+ format: DateTime.DATE_SHORT, // or DateTime.DATETIME_SHORT when timePicker: true
226
228
  separator: ' - ',
227
229
  applyLabel: 'Apply',
228
230
  cancelLabel: 'Cancel',
@@ -277,6 +279,11 @@
277
279
  // handle all the possible options overriding defaults
278
280
  //
279
281
 
282
+ if (typeof options.timePicker === 'boolean')
283
+ this.timePicker = options.timePicker;
284
+ if (this.timePicker)
285
+ this.locale.format = DateTime.DATETIME_SHORT;
286
+
280
287
  if (typeof options.locale === 'object') {
281
288
  for (let key of ['separator', 'applyLabel', 'cancelLabel', 'weekLabel']) {
282
289
  if (typeof options.locale[key] === 'string')
@@ -323,7 +330,7 @@
323
330
  }
324
331
  this.container.addClass(this.locale.direction);
325
332
 
326
- for (let key of ['timePicker', 'singleDatePicker', 'timePicker24Hour', 'showWeekNumbers', 'showISOWeekNumbers',
333
+ for (let key of ['singleDatePicker', 'timePicker24Hour', 'showWeekNumbers', 'showISOWeekNumbers',
327
334
  'showDropdowns', 'linkedCalendars', 'showCustomRangeLabel', 'alwaysShowCalendars', 'autoApply', 'autoUpdateInput', 'warnings']) {
328
335
  if (typeof options[key] === 'boolean')
329
336
  this[key] = options[key];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "daterangepicker-4.x",
3
- "version": "4.4.1",
3
+ "version": "4.4.3",
4
4
  "description": "Date range picker with time component and pre-defined ranges",
5
5
  "main": "daterangepicker.js",
6
6
  "style": "daterangepicker.css",