diff --git a/daterangepicker.js b/daterangepicker.js index 5f7d304b..6273263d 100644 --- a/daterangepicker.js +++ b/daterangepicker.js @@ -1,5 +1,5 @@ /** -* @version: 3.1 +* @version: 3.2 * @author: Dan Grossman http://www.dangrossman.info/ * @copyright: Copyright (c) 2012-2019 Dan Grossman. All rights reserved. * @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php @@ -9,10 +9,10 @@ (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Make globaly available as well - define(['moment', 'jquery'], function (moment, jquery) { + define(['dayjs', 'jquery'], function (dayjs, jquery) { if (!jquery.fn) jquery.fn = {}; // webpack server rendering - if (typeof moment !== 'function' && moment.hasOwnProperty('default')) moment = moment['default'] - return factory(moment, jquery); + if (typeof dayjs !== 'function' && dayjs.hasOwnProperty('default')) dayjs = dayjs['default'] + return factory(dayjs, jquery); }); } else if (typeof module === 'object' && module.exports) { // Node / Browserify @@ -22,28 +22,51 @@ jQuery = require('jquery'); if (!jQuery.fn) jQuery.fn = {}; } - var moment = (typeof window != 'undefined' && typeof window.moment != 'undefined') ? window.moment : require('moment'); - module.exports = factory(moment, jQuery); + var dayjs = (typeof window != 'undefined' && typeof window.dayjs != 'undefined') ? window.dayjs : require('dayjs'); + module.exports = factory(dayjs, jQuery); } else { // Browser globals - root.daterangepicker = factory(root.moment, root.jQuery); + root.daterangepicker = factory(root.dayjs, root.jQuery); } -}(typeof window !== 'undefined' ? window : this, function(moment, $) { +}(typeof window !== 'undefined' ? window : this, function(dayjs, $) { var DateRangePicker = function(element, options, cb) { + var updateLocale = require('dayjs/plugin/updateLocale') + var customParseFormat = require('dayjs/plugin/customParseFormat') + var isoWeek = require('dayjs/plugin/isoWeek') + var localeData = require('dayjs/plugin/localeData') + var localizedFormat = require('dayjs/plugin/localizedFormat') + var weekday = require('dayjs/plugin/weekday') + var arraySupport = require('dayjs/plugin/arraySupport') + var weekOfYear = require('dayjs/plugin/weekOfYear') + var advancedFormat = require('dayjs/plugin/advancedFormat') + var relativeTime = require('dayjs/plugin/relativeTime') + var calendar = require('dayjs/plugin/calendar') + + dayjs.extend(updateLocale); + dayjs.extend(customParseFormat) + dayjs.extend(isoWeek); + dayjs.extend(localeData); + dayjs.extend(localizedFormat); + dayjs.extend(weekday); + dayjs.extend(arraySupport); + dayjs.extend(weekOfYear); + dayjs.extend(advancedFormat); + dayjs.extend(relativeTime); + dayjs.extend(calendar); //default settings for options this.parentEl = 'body'; this.element = $(element); - this.startDate = moment().startOf('day'); - this.endDate = moment().endOf('day'); + this.startDate = dayjs().startOf('day'); + this.endDate = dayjs().endOf('day'); this.minDate = false; this.maxDate = false; this.maxSpan = false; this.autoApply = false; this.singleDatePicker = false; this.showDropdowns = false; - this.minYear = moment().subtract(100, 'year').format('YYYY'); - this.maxYear = moment().add(100, 'year').format('YYYY'); + this.minYear = dayjs().subtract(100, 'year').format('YYYY'); + this.maxYear = dayjs().add(100, 'year').format('YYYY'); this.showWeekNumbers = false; this.showISOWeekNumbers = false; this.showCustomRangeLabel = true; @@ -70,15 +93,15 @@ this.locale = { direction: 'ltr', - format: moment.localeData().longDateFormat('L'), + format: dayjs.localeData().longDateFormat('L'), separator: ' - ', applyLabel: 'Apply', cancelLabel: 'Cancel', weekLabel: 'W', customRangeLabel: 'Custom Range', - daysOfWeek: moment.weekdaysMin(), - monthNames: moment.monthsShort(), - firstDay: moment.localeData().firstDayOfWeek() + daysOfWeek: dayjs.weekdaysMin(), + monthNames: dayjs.monthsShort(), + firstDay: dayjs.localeData().firstDayOfWeek() }; this.callback = function() { }; @@ -99,22 +122,22 @@ //html template for the picker UI if (typeof options.template !== 'string' && !(options.template instanceof $)) options.template = - '
' + + '
' + '
' + '
' + - '
' + - '
' + + '
' + + '
' + '
' + '
' + - '
' + - '
' + + '
' + + '
' + '
' + '
' + - '' + - '' + - ' ' + + '' + + '' + + ' ' + '
' + - '
'; + '
'; this.parentEl = (options.parentEl && $(options.parentEl).length) ? $(options.parentEl) : $(this.parentEl); this.container = $(options.template).appendTo(this.parentEl); @@ -138,19 +161,19 @@ this.locale.daysOfWeek = options.locale.daysOfWeek.slice(); if (typeof options.locale.monthNames === 'object') - this.locale.monthNames = options.locale.monthNames.slice(); + this.locale.monthNames = options.locale.monthNames.slice(); if (typeof options.locale.firstDay === 'number') - this.locale.firstDay = options.locale.firstDay; + this.locale.firstDay = options.locale.firstDay; if (typeof options.locale.applyLabel === 'string') - this.locale.applyLabel = options.locale.applyLabel; + this.locale.applyLabel = options.locale.applyLabel; if (typeof options.locale.cancelLabel === 'string') - this.locale.cancelLabel = options.locale.cancelLabel; + this.locale.cancelLabel = options.locale.cancelLabel; if (typeof options.locale.weekLabel === 'string') - this.locale.weekLabel = options.locale.weekLabel; + this.locale.weekLabel = options.locale.weekLabel; if (typeof options.locale.customRangeLabel === 'string'){ //Support unicode chars in the custom range name. @@ -163,28 +186,28 @@ this.container.addClass(this.locale.direction); if (typeof options.startDate === 'string') - this.startDate = moment(options.startDate, this.locale.format); + this.startDate = dayjs(options.startDate, this.locale.format); if (typeof options.endDate === 'string') - this.endDate = moment(options.endDate, this.locale.format); + this.endDate = dayjs(options.endDate, this.locale.format); if (typeof options.minDate === 'string') - this.minDate = moment(options.minDate, this.locale.format); + this.minDate = dayjs(options.minDate, this.locale.format); if (typeof options.maxDate === 'string') - this.maxDate = moment(options.maxDate, this.locale.format); + this.maxDate = dayjs(options.maxDate, this.locale.format); if (typeof options.startDate === 'object') - this.startDate = moment(options.startDate); + this.startDate = dayjs(options.startDate); if (typeof options.endDate === 'object') - this.endDate = moment(options.endDate); + this.endDate = dayjs(options.endDate); if (typeof options.minDate === 'object') - this.minDate = moment(options.minDate); + this.minDate = dayjs(options.minDate); if (typeof options.maxDate === 'object') - this.maxDate = moment(options.maxDate); + this.maxDate = dayjs(options.maxDate); // sanity check for bad options if (this.minDate && this.startDate.isBefore(this.minDate)) @@ -298,11 +321,11 @@ start = end = null; if (split.length == 2) { - start = moment(split[0], this.locale.format); - end = moment(split[1], this.locale.format); + start = dayjs(split[0], this.locale.format); + end = dayjs(split[1], this.locale.format); } else if (this.singleDatePicker && val !== "") { - start = moment(val, this.locale.format); - end = moment(val, this.locale.format); + start = dayjs(val, this.locale.format); + end = dayjs(val, this.locale.format); } if (start !== null && end !== null) { this.setStartDate(start); @@ -315,14 +338,14 @@ for (range in options.ranges) { if (typeof options.ranges[range][0] === 'string') - start = moment(options.ranges[range][0], this.locale.format); + start = dayjs(options.ranges[range][0], this.locale.format); else - start = moment(options.ranges[range][0]); + start = dayjs(options.ranges[range][0]); if (typeof options.ranges[range][1] === 'string') - end = moment(options.ranges[range][1], this.locale.format); + end = dayjs(options.ranges[range][1], this.locale.format); else - end = moment(options.ranges[range][1]); + end = dayjs(options.ranges[range][1]); // If the start or end date exceed those allowed by the minDate or maxSpan // options, shorten the range to the allowable period. @@ -338,7 +361,7 @@ // If the end of the range is before the minimum or the start of the range is // after the maximum, don't display this range option at all. if ((this.minDate && end.isBefore(this.minDate, this.timepicker ? 'minute' : 'day')) - || (maxDate && start.isAfter(maxDate, this.timepicker ? 'minute' : 'day'))) + || (maxDate && start.isAfter(maxDate, this.timepicker ? 'minute' : 'day'))) continue; //Support unicode chars in the range names. @@ -452,27 +475,27 @@ setStartDate: function(startDate) { if (typeof startDate === 'string') - this.startDate = moment(startDate, this.locale.format); + this.startDate = dayjs(startDate, this.locale.format); if (typeof startDate === 'object') - this.startDate = moment(startDate); + this.startDate = dayjs(startDate); if (!this.timePicker) this.startDate = this.startDate.startOf('day'); if (this.timePicker && this.timePickerIncrement) - this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); + this.startDate = this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); if (this.minDate && this.startDate.isBefore(this.minDate)) { this.startDate = this.minDate.clone(); if (this.timePicker && this.timePickerIncrement) - this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); + this.startDate = this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); } if (this.maxDate && this.startDate.isAfter(this.maxDate)) { this.startDate = this.maxDate.clone(); if (this.timePicker && this.timePickerIncrement) - this.startDate.minute(Math.floor(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); + this.startDate = this.startDate.minute(Math.floor(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); } if (!this.isShowing) @@ -483,16 +506,16 @@ setEndDate: function(endDate) { if (typeof endDate === 'string') - this.endDate = moment(endDate, this.locale.format); + this.endDate = dayjs(endDate, this.locale.format); if (typeof endDate === 'object') - this.endDate = moment(endDate); + this.endDate = dayjs(endDate); if (!this.timePicker) this.endDate = this.endDate.endOf('day'); if (this.timePicker && this.timePickerIncrement) - this.endDate.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); + this.endDate = this.endDate.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); if (this.endDate.isBefore(this.startDate)) this.endDate = this.startDate.clone(); @@ -546,7 +569,7 @@ (this.startDate.format('YYYY-MM') == this.leftCalendar.month.format('YYYY-MM') || this.startDate.format('YYYY-MM') == this.rightCalendar.month.format('YYYY-MM')) && (this.endDate.format('YYYY-MM') == this.leftCalendar.month.format('YYYY-MM') || this.endDate.format('YYYY-MM') == this.rightCalendar.month.format('YYYY-MM')) - ) { + ) { return; } @@ -564,8 +587,8 @@ } } if (this.maxDate && this.linkedCalendars && !this.singleDatePicker && this.rightCalendar.month > this.maxDate) { - this.rightCalendar.month = this.maxDate.clone().date(2); - this.leftCalendar.month = this.maxDate.clone().date(2).subtract(1, 'month'); + this.rightCalendar.month = this.maxDate.clone().date(2); + this.leftCalendar.month = this.maxDate.clone().date(2).subtract(1, 'month'); } }, @@ -602,8 +625,8 @@ hour = 0; } } - this.leftCalendar.month.hour(hour).minute(minute).second(second); - this.rightCalendar.month.hour(hour).minute(minute).second(second); + this.leftCalendar.month = this.leftCalendar.month.hour(hour).minute(minute).second(second); + this.rightCalendar.month = this.rightCalendar.month.hour(hour).minute(minute).second(second); } this.renderCalendar('left'); @@ -628,12 +651,12 @@ var hour = calendar.month.hour(); var minute = calendar.month.minute(); var second = calendar.month.second(); - var daysInMonth = moment([year, month]).daysInMonth(); - var firstDay = moment([year, month, 1]); - var lastDay = moment([year, month, daysInMonth]); - var lastMonth = moment(firstDay).subtract(1, 'month').month(); - var lastYear = moment(firstDay).subtract(1, 'month').year(); - var daysInLastMonth = moment([lastYear, lastMonth]).daysInMonth(); + var daysInMonth = dayjs([year, month]).daysInMonth(); + var firstDay = dayjs([year, month, 1]); + var lastDay = dayjs([year, month, daysInMonth]); + var lastMonth = dayjs(firstDay).subtract(1, 'month').month(); + var lastYear = dayjs(firstDay).subtract(1, 'month').year(); + var daysInLastMonth = dayjs([lastYear, lastMonth]).daysInMonth(); var dayOfWeek = firstDay.day(); //initialize a 6 rows x 7 columns array for the calendar @@ -653,10 +676,10 @@ if (dayOfWeek == this.locale.firstDay) startDay = daysInLastMonth - 6; - var curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]); + var curDate = dayjs([lastYear, lastMonth, startDay, 12, minute, second]); var col, row; - for (var i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add(24, 'hour')) { + for (var i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = dayjs(curDate).add(24, 'hour')) { if (i > 0 && col % 7 === 0) { col = 0; row++; @@ -1036,26 +1059,26 @@ } switch (drops) { - case 'auto': - containerTop = this.element.offset().top + this.element.outerHeight() - parentOffset.top; - if (containerTop + this.container.outerHeight() >= this.parentEl[0].scrollHeight) { + case 'auto': + containerTop = this.element.offset().top + this.element.outerHeight() - parentOffset.top; + if (containerTop + this.container.outerHeight() >= this.parentEl[0].scrollHeight) { + containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top; + drops = 'up'; + } + break; + case 'up': containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top; - drops = 'up'; - } - break; - case 'up': - containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top; - break; - default: - containerTop = this.element.offset().top + this.element.outerHeight() - parentOffset.top; - break; + break; + default: + containerTop = this.element.offset().top + this.element.outerHeight() - parentOffset.top; + break; } // Force the container to it's actual width this.container.css({ - top: 0, - left: 0, - right: 'auto' + top: 0, + left: 0, + right: 'auto' }); var containerWidth = this.container.outerWidth(); @@ -1078,7 +1101,7 @@ } } else if (this.opens == 'center') { var containerLeft = this.element.offset().left - parentOffset.left + this.element.outerWidth() / 2 - - containerWidth / 2; + - containerWidth / 2; if (containerLeft < 0) { this.container.css({ top: containerTop, @@ -1124,13 +1147,13 @@ // Bind global datepicker mousedown for hiding and $(document) - .on('mousedown.daterangepicker', this._outsideClickProxy) - // also support mobile devices - .on('touchend.daterangepicker', this._outsideClickProxy) - // also explicitly play nice with Bootstrap dropdowns, which stopPropagation when clicking them - .on('click.daterangepicker', '[data-toggle=dropdown]', this._outsideClickProxy) - // and also close when focus changes to outside the picker (eg. tabbing between controls) - .on('focusin.daterangepicker', this._outsideClickProxy); + .on('mousedown.daterangepicker', this._outsideClickProxy) + // also support mobile devices + .on('touchend.daterangepicker', this._outsideClickProxy) + // also explicitly play nice with Bootstrap dropdowns, which stopPropagation when clicking them + .on('click.daterangepicker', '[data-toggle=dropdown]', this._outsideClickProxy) + // and also close when focus changes to outside the picker (eg. tabbing between controls) + .on('focusin.daterangepicker', this._outsideClickProxy); // Reposition the picker if the window is resized while it's open $(window).on('resize.daterangepicker', $.proxy(function(e) { this.move(e); }, this)); @@ -1187,7 +1210,7 @@ target.closest(this.element).length || target.closest(this.container).length || target.closest('.calendar-table').length - ) return; + ) return; this.hide(); this.element.trigger('outsideClick.daterangepicker', this); }, @@ -1214,8 +1237,8 @@ this.endDate = dates[1]; if (!this.timePicker) { - this.startDate.startOf('day'); - this.endDate.endOf('day'); + this.startDate = this.startDate.startOf('day'); + this.endDate = this.endDate.endOf('day'); } if (!this.alwaysShowCalendars) @@ -1227,11 +1250,11 @@ clickPrev: function(e) { var cal = $(e.target).parents('.drp-calendar'); if (cal.hasClass('left')) { - this.leftCalendar.month.subtract(1, 'month'); + this.leftCalendar.month = this.leftCalendar.month.subtract(1, 'month'); if (this.linkedCalendars) - this.rightCalendar.month.subtract(1, 'month'); + this.rightCalendar.month = this.rightCalendar.month.subtract(1, 'month'); } else { - this.rightCalendar.month.subtract(1, 'month'); + this.rightCalendar.month = this.rightCalendar.month.subtract(1, 'month'); } this.updateCalendars(); }, @@ -1239,11 +1262,11 @@ clickNext: function(e) { var cal = $(e.target).parents('.drp-calendar'); if (cal.hasClass('left')) { - this.leftCalendar.month.add(1, 'month'); + this.leftCalendar.month = this.leftCalendar.month.add(1, 'month'); } else { - this.rightCalendar.month.add(1, 'month'); + this.rightCalendar.month = this.rightCalendar.month.add(1, 'month'); if (this.linkedCalendars) - this.leftCalendar.month.add(1, 'month'); + this.leftCalendar.month = this.leftCalendar.month.add(1, 'month'); } this.updateCalendars(); }, @@ -1347,8 +1370,8 @@ } this.setEndDate(date.clone()); if (this.autoApply) { - this.calculateChosenLabel(); - this.clickApply(); + this.calculateChosenLabel(); + this.clickApply(); } } @@ -1369,7 +1392,7 @@ var customRange = true; var i = 0; for (var range in this.ranges) { - if (this.timePicker) { + if (this.timePicker) { var format = this.timePickerSeconds ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD HH:mm"; //ignore times when comparing dates if time picker seconds is not enabled if (this.startDate.format(format) == this.ranges[range][0].format(format) && this.endDate.format(format) == this.ranges[range][1].format(format)) { @@ -1414,7 +1437,7 @@ leftOrRight = isLeft ? 'left' : 'right', cal = this.container.find('.drp-calendar.'+leftOrRight); - // Month must be Number for new moment versions + // Month must be Number for new dayjs versions var month = parseInt(cal.find('.monthselect').val(), 10); var year = cal.find('.yearselect').val(); @@ -1440,11 +1463,11 @@ } if (isLeft) { - this.leftCalendar.month.month(month).year(year); + this.leftCalendar.month = this.leftCalendar.month.month(month).year(year); if (this.linkedCalendars) this.rightCalendar.month = this.leftCalendar.month.clone().add(1, 'month'); } else { - this.rightCalendar.month.month(month).year(year); + this.rightCalendar.month = this.rightCalendar.month.month(month).year(year); if (this.linkedCalendars) this.leftCalendar.month = this.rightCalendar.month.clone().subtract(1, 'month'); } @@ -1472,10 +1495,7 @@ } if (isLeft) { - var start = this.startDate.clone(); - start.hour(hour); - start.minute(minute); - start.second(second); + const start = this.startDate.hour(hour).minute(minute).second(second); this.setStartDate(start); if (this.singleDatePicker) { this.endDate = this.startDate.clone(); @@ -1483,11 +1503,7 @@ this.setEndDate(start.clone()); } } else if (this.endDate) { - var end = this.endDate.clone(); - end.hour(hour); - end.minute(minute); - end.second(second); - this.setEndDate(end); + this.setEndDate(this.endDate.hour(hour).minute(minute).second(second)); } //update the calendars so all clickable dates reflect the new time component @@ -1511,12 +1527,12 @@ end = null; if (dateString.length === 2) { - start = moment(dateString[0], this.locale.format); - end = moment(dateString[1], this.locale.format); + start = dayjs(dateString[0], this.locale.format); + end = dayjs(dateString[1], this.locale.format); } if (this.singleDatePicker || start === null || end === null) { - start = moment(this.element.val(), this.locale.format); + start = dayjs(this.element.val(), this.locale.format); end = start; } diff --git a/package.json b/package.json index bb8a6216..c893334b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "daterangepicker", - "version": "3.1.0", + "name": "daterangepicker-dayjs-immutable", + "version": "3.2.2", "description": "Date range picker component for Bootstrap", "main": "daterangepicker.js", "style": "daterangepicker.css", @@ -9,7 +9,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/dangrossman/daterangepicker.git" + "url": "https://github.com/BWorst/daterangepicker-dayjs-immutable.git" }, "author": { "name": "Dan Grossman", @@ -22,7 +22,7 @@ }, "homepage": "https://github.com/dangrossman/daterangepicker", "dependencies": { - "jquery": ">=1.10", - "moment": "^2.9.0" + "dayjs": "^1.11.11", + "jquery": ">=1.10" } }