From a65d609fdcf365323cee51fda9b5d569132f4f57 Mon Sep 17 00:00:00 2001 From: James Cole Date: Sun, 16 Aug 2015 21:18:12 +0200 Subject: [PATCH] Fixed bug #104 --- public/css/daterangepicker-bs3.css | 335 ----- public/css/daterangepicker.css | 341 +++++ public/js/daterangepicker.js | 2014 +++++++++++++++------------- public/js/firefly.js | 3 +- resources/twig/layout/default.twig | 10 +- 5 files changed, 1431 insertions(+), 1272 deletions(-) delete mode 100755 public/css/daterangepicker-bs3.css create mode 100755 public/css/daterangepicker.css diff --git a/public/css/daterangepicker-bs3.css b/public/css/daterangepicker-bs3.css deleted file mode 100755 index 431c2e6bc7..0000000000 --- a/public/css/daterangepicker-bs3.css +++ /dev/null @@ -1,335 +0,0 @@ -/*! - * Stylesheet for the Date Range Picker, for use with Bootstrap 3.x - * - * Copyright 2013-2015 Dan Grossman ( http://www.dangrossman.info ) - * Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php - * - * Built for http://www.improvely.com - */ - -.daterangepicker.dropdown-menu { - max-width: none; - z-index: 3000; -} - -.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar { - float: left; - margin: 4px; -} - -.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar, -.daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar { - float: right; - margin: 4px; -} - -.daterangepicker.single .ranges, .daterangepicker.single .calendar { - float: none; -} - -.daterangepicker .ranges { - width: 160px; - text-align: left; -} - -.daterangepicker .ranges .range_inputs>div { - float: left; -} - -.daterangepicker .ranges .range_inputs>div:nth-child(2) { - padding-left: 11px; -} - -.daterangepicker .calendar { - display: none; - max-width: 270px; -} - -.daterangepicker.show-calendar .calendar { - display: block; -} - -.daterangepicker .calendar.single .calendar-date { - border: none; -} - -.daterangepicker .calendar th, .daterangepicker .calendar td { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - white-space: nowrap; - text-align: center; - min-width: 32px; -} - -.daterangepicker .daterangepicker_start_input label, -.daterangepicker .daterangepicker_end_input label { - color: #333; - display: block; - font-size: 11px; - font-weight: normal; - height: 20px; - line-height: 20px; - margin-bottom: 2px; - text-shadow: #fff 1px 1px 0px; - text-transform: uppercase; - width: 74px; -} - -.daterangepicker .ranges input { - font-size: 11px; -} - -.daterangepicker .ranges .input-mini { - border: 1px solid #ccc; - border-radius: 4px; - color: #555; - display: block; - font-size: 11px; - height: 30px; - line-height: 30px; - vertical-align: middle; - margin: 0 0 10px 0; - padding: 0 6px; - width: 74px; -} - -.daterangepicker .ranges ul { - list-style: none; - margin: 0; - padding: 0; -} - -.daterangepicker .ranges li { - font-size: 13px; - background: #f5f5f5; - border: 1px solid #f5f5f5; - color: #08c; - padding: 3px 12px; - margin-bottom: 8px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - cursor: pointer; -} - -.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { - background: #08c; - border: 1px solid #08c; - color: #fff; -} - -.daterangepicker .calendar-date { - border: 1px solid #ddd; - padding: 4px; - border-radius: 4px; - background: #fff; -} - -.daterangepicker .calendar-time { - text-align: center; - margin: 8px auto 0 auto; - line-height: 30px; -} - -.daterangepicker { - position: absolute; - background: #fff; - top: 100px; - left: 20px; - padding: 4px; - margin-top: 1px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} - -.daterangepicker.opensleft:before { - position: absolute; - top: -7px; - right: 9px; - display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-left: 7px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; -} - -.daterangepicker.opensleft:after { - position: absolute; - top: -6px; - right: 10px; - display: inline-block; - border-right: 6px solid transparent; - border-bottom: 6px solid #fff; - border-left: 6px solid transparent; - content: ''; -} - -.daterangepicker.openscenter:before { - position: absolute; - top: -7px; - left: 0; - right: 0; - width: 0; - margin-left: auto; - margin-right: auto; - display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-left: 7px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; -} - -.daterangepicker.openscenter:after { - position: absolute; - top: -6px; - left: 0; - right: 0; - width: 0; - margin-left: auto; - margin-right: auto; - display: inline-block; - border-right: 6px solid transparent; - border-bottom: 6px solid #fff; - border-left: 6px solid transparent; - content: ''; -} - -.daterangepicker.opensright:before { - position: absolute; - top: -7px; - left: 9px; - display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-left: 7px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; -} - -.daterangepicker.opensright:after { - position: absolute; - top: -6px; - left: 10px; - display: inline-block; - border-right: 6px solid transparent; - border-bottom: 6px solid #fff; - border-left: 6px solid transparent; - content: ''; -} - -.daterangepicker.dropup{ - margin-top: -5px; -} -.daterangepicker.dropup:before{ - top: initial; - bottom:-7px; - border-bottom: initial; - border-top: 7px solid #ccc; -} -.daterangepicker.dropup:after{ - top: initial; - bottom:-6px; - border-bottom: initial; - border-top: 6px solid #fff; -} - -.daterangepicker table { - width: 100%; - margin: 0; -} - -.daterangepicker td, .daterangepicker th { - text-align: center; - width: 20px; - height: 20px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - cursor: pointer; - white-space: nowrap; -} - -.daterangepicker td.off { - color: #999; -} - -.daterangepicker td.disabled, .daterangepicker option.disabled { - color: #999; -} - -.daterangepicker td.available:hover, .daterangepicker th.available:hover { - background: #eee; -} - -.daterangepicker td.in-range { - background: #ebf4f8; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} - -.daterangepicker td.start-date { - -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} - -.daterangepicker td.end-date { - -webkit-border-radius: 0 4px 4px 0; - -moz-border-radius: 0 4px 4px 0; - border-radius: 0 4px 4px 0; -} - -.daterangepicker td.start-date.end-date { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} - -.daterangepicker td.active, .daterangepicker td.active:hover { - background-color: #357ebd; - border-color: #3071a9; - color: #fff; -} - -.daterangepicker td.week, .daterangepicker th.week { - font-size: 80%; - color: #ccc; -} - -.daterangepicker select.monthselect, .daterangepicker select.yearselect { - font-size: 12px; - padding: 1px; - height: auto; - margin: 0; - cursor: default; -} - -.daterangepicker select.monthselect { - margin-right: 2%; - width: 56%; -} - -.daterangepicker select.yearselect { - width: 40%; -} - -.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { - width: 50px; - margin-bottom: 0; -} - -.daterangepicker_start_input { - float: left; -} - -.daterangepicker_end_input { - float: left; - padding-left: 11px -} - -.daterangepicker th.month { - width: auto; -} \ No newline at end of file diff --git a/public/css/daterangepicker.css b/public/css/daterangepicker.css new file mode 100755 index 0000000000..ea7b818c69 --- /dev/null +++ b/public/css/daterangepicker.css @@ -0,0 +1,341 @@ +/** +* A stylesheet for use with Bootstrap 3.x +* @author: Dan Grossman http://www.dangrossman.info/ +* @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved. +* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php +* @website: https://www.improvely.com/ +*/ + +/* Container Appearance */ + +.daterangepicker { + position: absolute; + background: #fff; + top: 100px; + left: 20px; + padding: 4px; + margin-top: 1px; + border-radius: 4px; +} + +.daterangepicker.opensleft:before { + position: absolute; + top: -7px; + right: 9px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} + +.daterangepicker.opensleft:after { + position: absolute; + top: -6px; + right: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + border-left: 6px solid transparent; + content: ''; +} + +.daterangepicker.openscenter:before { + position: absolute; + top: -7px; + left: 0; + right: 0; + width: 0; + margin-left: auto; + margin-right: auto; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} + +.daterangepicker.openscenter:after { + position: absolute; + top: -6px; + left: 0; + right: 0; + width: 0; + margin-left: auto; + margin-right: auto; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + border-left: 6px solid transparent; + content: ''; +} + +.daterangepicker.opensright:before { + position: absolute; + top: -7px; + left: 9px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} + +.daterangepicker.opensright:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + border-left: 6px solid transparent; + content: ''; +} + +.daterangepicker.dropup{ + margin-top: -5px; +} +.daterangepicker.dropup:before{ + top: initial; + bottom:-7px; + border-bottom: initial; + border-top: 7px solid #ccc; +} +.daterangepicker.dropup:after{ + top: initial; + bottom:-6px; + border-bottom: initial; + border-top: 6px solid #fff; +} + +.daterangepicker.dropdown-menu { + max-width: none; + z-index: 3000; +} + +.daterangepicker .ranges, .daterangepicker .calendar { + float: left; +} + +.daterangepicker.single .ranges, .daterangepicker.single .calendar { + float: none; +} + +.daterangepicker .ranges { + margin: 4px; + text-align: left; +} + +.daterangepicker .calendar { + display: none; + max-width: 270px; +} + +.daterangepicker.show-calendar .calendar { + display: block; +} + +.daterangepicker .calendar.single .calendar-table { + border: none; +} + +/* Calendars */ + +.daterangepicker .calendar th, .daterangepicker .calendar td { + white-space: nowrap; + text-align: center; + min-width: 32px; +} + +.daterangepicker .calendar-table { + border: 1px solid #ddd; + padding: 4px; + border-radius: 4px; + background: #fff; +} + +.daterangepicker .calendar.left .calendar-table { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.daterangepicker .calendar.right .calendar-table { + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.daterangepicker .calendar.left { + margin: 4px 0 4px 4px; +} + +.daterangepicker .calendar.right { + margin: 4px 4px 4px 0; +} + +.daterangepicker .calendar.left .calendar-table { + padding-right: 12px; +} + +.daterangepicker table { + width: 100%; + margin: 0; +} + +.daterangepicker td, .daterangepicker th { + text-align: center; + width: 20px; + height: 20px; + border-radius: 4px; + white-space: nowrap; + cursor: pointer; +} + +.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { + color: #999; + background: #fff; +} + +.daterangepicker td.disabled, .daterangepicker option.disabled { + color: #999; +} + +.daterangepicker td.available:hover, .daterangepicker th.available:hover { + background: #eee; +} + +.daterangepicker td.in-range { + background: #ebf4f8; + border-radius: 0; +} + +.daterangepicker td.start-date { + border-radius: 4px 0 0 4px; +} + +.daterangepicker td.end-date { + border-radius: 0 4px 4px 0; +} + +.daterangepicker td.start-date.end-date { + border-radius: 4px; +} + +.daterangepicker td.active, .daterangepicker td.active:hover { + background-color: #357ebd; + border-color: #3071a9; + color: #fff; +} + +.daterangepicker td.week, .daterangepicker th.week { + font-size: 80%; + color: #ccc; +} + +.daterangepicker select.monthselect, .daterangepicker select.yearselect { + font-size: 12px; + padding: 1px; + height: auto; + margin: 0; + cursor: default; +} + +.daterangepicker select.monthselect { + margin-right: 2%; + width: 56%; +} + +.daterangepicker select.yearselect { + width: 40%; +} + +.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { + width: 50px; + margin-bottom: 0; +} + +.daterangepicker th.month { + width: auto; +} + +/* Text Input Above Each Calendar */ + +.daterangepicker .input-mini { + border: 1px solid #ccc; + border-radius: 4px; + color: #555; + display: block; + height: 30px; + line-height: 30px; + vertical-align: middle; + margin: 0 0 5px 0; + padding: 0 6px 0 28px; + width: 100%; +} + +.daterangepicker .input-mini.active { + border: 1px solid #357ebd; +} + +.daterangepicker .daterangepicker_input i { + position: absolute; + left: 8px; + top: 8px; +} + +.daterangepicker .left .daterangepicker_input { + padding-right: 12px; +} + +.daterangepicker .daterangepicker_input { + position: relative; +} + +/* Time Picker */ + +.daterangepicker .calendar-time { + text-align: center; + margin: 5px auto; + line-height: 30px; + position: relative; + padding-left: 28px; +} + +.daterangepicker .calendar-time select.disabled { + color: #ccc; + cursor: not-allowed; +} + +/* Predefined Ranges */ + +.daterangepicker .ranges { + font-size: 11px; +} + +.daterangepicker .ranges ul { + list-style: none; + margin: 0; + padding: 0; + width: 160px; +} + +.daterangepicker .ranges li { + font-size: 13px; + background: #f5f5f5; + border: 1px solid #f5f5f5; + color: #08c; + padding: 3px 12px; + margin-bottom: 8px; + border-radius: 5px; + cursor: pointer; +} + +.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { + background: #08c; + border: 1px solid #08c; + color: #fff; +} \ No newline at end of file diff --git a/public/js/daterangepicker.js b/public/js/daterangepicker.js index e54fd5c9f7..ada6497314 100755 --- a/public/js/daterangepicker.js +++ b/public/js/daterangepicker.js @@ -1,5 +1,5 @@ /** -* @version: 1.3.18 +* @version: 2.0.8 * @author: Dan Grossman http://www.dangrossman.info/ * @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved. * @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php @@ -15,70 +15,366 @@ } else if (typeof exports !== 'undefined') { var momentjs = require('moment'); - var jQuery; - try { - jQuery = require('jquery'); - } catch (err) { - jQuery = window.jQuery; - if (!jQuery) throw new Error('jQuery dependency not found'); + var jQuery = window.jQuery; + if (jQuery === undefined) { + try { + jQuery = require('jquery'); + } catch (err) { + if (!jQuery) throw new Error('jQuery dependency not found'); + } } factory(root, exports, momentjs, jQuery); // Finally, as a browser global. } else { - root.daterangepicker = factory(root, {}, root.moment, (root.jQuery || root.Zepto || root.ender || root.$)); + root.daterangepicker = factory(root, {}, root.moment || moment, (root.jQuery || root.Zepto || root.ender || root.$)); } }(this, function(root, daterangepicker, moment, $) { - var DateRangePicker = function (element, options, cb) { + var DateRangePicker = function(element, options, cb) { - // by default, the daterangepicker element is placed at the bottom of HTML body + //default settings for options this.parentEl = 'body'; - - //element that triggered the date range picker this.element = $(element); + this.startDate = moment().startOf('day'); + this.endDate = moment().endOf('day'); + this.timeZone = moment().utcOffset(); + this.minDate = false; + this.maxDate = false; + this.dateLimit = false; + this.autoApply = false; + this.singleDatePicker = false; + this.showDropdowns = false; + this.showWeekNumbers = false; + this.timePicker = false; + this.timePicker24Hour = false; + this.timePickerIncrement = 1; + this.timePickerSeconds = false; + this.linkedCalendars = true; + this.ranges = {}; - //tracks visible state + this.opens = 'right'; + if (this.element.hasClass('pull-right')) + this.opens = 'left'; + + this.drops = 'down'; + if (this.element.hasClass('dropup')) + this.drops = 'up'; + + this.buttonClasses = 'btn btn-sm'; + this.applyClass = 'btn-success'; + this.cancelClass = 'btn-default'; + + this.locale = { + format: 'MM/DD/YYYY', + separator: ' - ', + applyLabel: 'Apply', + cancelLabel: 'Cancel', + weekLabel: 'W', + customRangeLabel: 'Custom Range', + daysOfWeek: moment.weekdaysMin(), + monthNames: moment.monthsShort(), + firstDay: moment.localeData().firstDayOfWeek() + }; + + this.callback = function() { }; + + //some state information this.isShowing = false; + this.leftCalendar = {}; + this.rightCalendar = {}; - //create the picker HTML object - var DRPTemplate = '
' + - '
' + - '
' + - '
' + - '
' + - '
' + - '' + - '' + - '
' + - '
' + - '' + - '' + - '
' + - ' ' + - '' + - '
' + - '
' + - '
'; - - //custom options + //custom options from user if (typeof options !== 'object' || options === null) options = {}; - this.parentEl = (typeof options === 'object' && options.parentEl && $(options.parentEl).length) ? $(options.parentEl) : $(this.parentEl); - this.container = $(DRPTemplate).appendTo(this.parentEl); + //allow setting options with data attributes + //data-api options will be overwritten with custom javascript options + options = $.extend(this.element.data(), options); - this.setOptions(options, cb); + //html template for the picker UI + if (typeof options.template !== 'string') + options.template = '
' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + ' ' + + '' + + '
' + + '
' + + '
'; + + this.parentEl = (options.parentEl && $(options.parentEl).length) ? $(options.parentEl) : $(this.parentEl); + this.container = $(options.template).appendTo(this.parentEl); + + // + // handle all the possible options overriding defaults + // + + if (typeof options.locale === 'object') { + + if (typeof options.locale.format === 'string') + this.locale.format = options.locale.format; + + if (typeof options.locale.separator === 'string') + this.locale.separator = options.locale.separator; + + if (typeof options.locale.daysOfWeek === 'object') + this.locale.daysOfWeek = options.locale.daysOfWeek.slice(); + + if (typeof options.locale.monthNames === 'object') + this.locale.monthNames = options.locale.monthNames.slice(); + + if (typeof options.locale.firstDay === 'number') + this.locale.firstDay = options.locale.firstDay; + + if (typeof options.locale.applyLabel === 'string') + this.locale.applyLabel = options.locale.applyLabel; + + if (typeof options.locale.cancelLabel === 'string') + this.locale.cancelLabel = options.locale.cancelLabel; + + if (typeof options.locale.weekLabel === 'string') + this.locale.weekLabel = options.locale.weekLabel; + + if (typeof options.locale.customRangeLabel === 'string') + this.locale.customRangeLabel = options.locale.customRangeLabel; + + } + + if (typeof options.startDate === 'string') + this.startDate = moment(options.startDate, this.locale.format); + + if (typeof options.endDate === 'string') + this.endDate = moment(options.endDate, this.locale.format); + + if (typeof options.minDate === 'string') + this.minDate = moment(options.minDate, this.locale.format); + + if (typeof options.maxDate === 'string') + this.maxDate = moment(options.maxDate, this.locale.format); + + if (typeof options.startDate === 'object') + this.startDate = moment(options.startDate); + + if (typeof options.endDate === 'object') + this.endDate = moment(options.endDate); + + if (typeof options.minDate === 'object') + this.minDate = moment(options.minDate); + + if (typeof options.maxDate === 'object') + this.maxDate = moment(options.maxDate); + + // sanity check for bad options + if (this.minDate && this.startDate.isBefore(this.minDate)) + this.startDate = this.minDate.clone(); + + // sanity check for bad options + if (this.maxDate && this.endDate.isAfter(this.maxDate)) + this.endDate = this.maxDate.clone(); + + if (typeof options.applyClass === 'string') + this.applyClass = options.applyClass; + + if (typeof options.cancelClass === 'string') + this.cancelClass = options.cancelClass; + + if (typeof options.dateLimit === 'object') + this.dateLimit = options.dateLimit; + + if (typeof options.opens === 'string') + this.opens = options.opens; + + if (typeof options.drops === 'string') + this.drops = options.drops; + + if (typeof options.showWeekNumbers === 'boolean') + this.showWeekNumbers = options.showWeekNumbers; + + if (typeof options.buttonClasses === 'string') + this.buttonClasses = options.buttonClasses; + + if (typeof options.buttonClasses === 'object') + this.buttonClasses = options.buttonClasses.join(' '); + + if (typeof options.showDropdowns === 'boolean') + this.showDropdowns = options.showDropdowns; + + if (typeof options.singleDatePicker === 'boolean') { + this.singleDatePicker = options.singleDatePicker; + if (this.singleDatePicker) + this.endDate = this.startDate.clone(); + } + + if (typeof options.timePicker === 'boolean') + this.timePicker = options.timePicker; + + if (typeof options.timePickerSeconds === 'boolean') + this.timePickerSeconds = options.timePickerSeconds; + + if (typeof options.timePickerIncrement === 'number') + this.timePickerIncrement = options.timePickerIncrement; + + if (typeof options.timePicker24Hour === 'boolean') + this.timePicker24Hour = options.timePicker24Hour; + + if (typeof options.autoApply === 'boolean') + this.autoApply = options.autoApply; + + if (typeof options.linkedCalendars === 'boolean') + this.linkedCalendars = options.linkedCalendars; + + // update day names order to firstDay + if (this.locale.firstDay != 0) { + var iterator = this.locale.firstDay; + while (iterator > 0) { + this.locale.daysOfWeek.push(this.locale.daysOfWeek.shift()); + iterator--; + } + } + + var start, end, range; + + //if no start/end dates set, check if an input element contains initial values + if (typeof options.startDate === 'undefined' && typeof options.endDate === 'undefined') { + if ($(this.element).is('input[type=text]')) { + var val = $(this.element).val(), + split = val.split(this.locale.separator); + + start = end = null; + + if (split.length == 2) { + start = moment(split[0], this.locale.format); + end = moment(split[1], this.locale.format); + } else if (this.singleDatePicker && val !== "") { + start = moment(val, this.locale.format); + end = moment(val, this.locale.format); + } + if (start !== null && end !== null) { + this.setStartDate(start); + this.setEndDate(end); + } + } + } + + // bind the time zone used to build the calendar to either the timeZone passed in through the options or the zone of the startDate (which will be the local time zone by default) + if (typeof options.timeZone === 'string' || typeof options.timeZone === 'number') { + if (typeof options.timeZone === 'string' && typeof moment.tz !== 'undefined') { + this.timeZone = moment.tz.zone(options.timeZone).parse(new Date) * -1; // Offset is positive if the timezone is behind UTC and negative if it is ahead. + } else { + this.timeZone = options.timeZone; + } + this.startDate.utcOffset(this.timeZone); + this.endDate.utcOffset(this.timeZone); + } else { + this.timeZone = moment(this.startDate).utcOffset(); + } + + if (typeof options.ranges === 'object') { + for (range in options.ranges) { + + if (typeof options.ranges[range][0] === 'string') + start = moment(options.ranges[range][0], this.locale.format); + else + start = moment(options.ranges[range][0]); + + if (typeof options.ranges[range][1] === 'string') + end = moment(options.ranges[range][1], this.locale.format); + else + end = moment(options.ranges[range][1]); + + // If the start or end date exceed those allowed by the minDate or dateLimit + // options, shorten the range to the allowable period. + if (this.minDate && start.isBefore(this.minDate)) + start = this.minDate.clone(); + + var maxDate = this.maxDate; + if (this.dateLimit && start.clone().add(this.dateLimit).isAfter(maxDate)) + maxDate = start.clone().add(this.dateLimit); + if (maxDate && end.isAfter(maxDate)) + end = maxDate.clone(); + + // 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)) || (maxDate && start.isAfter(maxDate))) + continue; + + this.ranges[range] = [start, end]; + } + + var list = ''; + this.container.find('.ranges ul').remove(); + this.container.find('.ranges').prepend(list); + } + + if (typeof cb === 'function') { + this.callback = cb; + } + + if (!this.timePicker) { + this.startDate = this.startDate.startOf('day'); + this.endDate = this.endDate.endOf('day'); + this.container.find('.calendar-time').hide(); + } + + //can't be used together for now + if (this.timePicker && this.autoApply) + this.autoApply = false; + + if (this.autoApply && typeof options.ranges !== 'object') { + this.container.find('.ranges').hide(); + } else if (this.autoApply) { + this.container.find('.applyBtn, .cancelBtn').addClass('hide'); + } + + if (this.singleDatePicker) { + this.container.addClass('single'); + this.container.find('.calendar.left').addClass('single'); + this.container.find('.calendar.left').show(); + this.container.find('.calendar.right').hide(); + this.container.find('.daterangepicker_input input, .daterangepicker_input i').hide(); + if (!this.timePicker) { + this.container.find('.ranges').hide(); + } + } + + if (typeof options.ranges === 'undefined' && !this.singleDatePicker) { + this.container.addClass('show-calendar'); + } + + this.container.removeClass('opensleft opensright').addClass('opens' + this.opens); //apply CSS classes and labels to buttons - var c = this.container; - $.each(this.buttonClasses, function (idx, val) { - c.find('button').addClass(val); - }); - this.container.find('.daterangepicker_start_input label').html(this.locale.fromLabel); - this.container.find('.daterangepicker_end_input label').html(this.locale.toLabel); + this.container.find('.applyBtn, .cancelBtn').addClass(this.buttonClasses); if (this.applyClass.length) this.container.find('.applyBtn').addClass(this.applyClass); if (this.cancelClass.length) @@ -86,7 +382,9 @@ this.container.find('.applyBtn').html(this.locale.applyLabel); this.container.find('.cancelBtn').html(this.locale.cancelLabel); - //event listeners + // + // event listeners + // this.container.find('.calendar') .on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this)) @@ -94,359 +392,52 @@ .on('click.daterangepicker', 'td.available', $.proxy(this.clickDate, this)) .on('mouseenter.daterangepicker', 'td.available', $.proxy(this.hoverDate, this)) .on('mouseleave.daterangepicker', 'td.available', $.proxy(this.updateFormInputs, this)) - .on('change.daterangepicker', 'select.yearselect', $.proxy(this.updateMonthYear, this)) - .on('change.daterangepicker', 'select.monthselect', $.proxy(this.updateMonthYear, this)) - .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.updateTime, this)); + .on('change.daterangepicker', 'select.yearselect', $.proxy(this.monthOrYearChanged, this)) + .on('change.daterangepicker', 'select.monthselect', $.proxy(this.monthOrYearChanged, this)) + .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.timeChanged, this)) + .on('click.daterangepicker', '.daterangepicker_input input', $.proxy(this.showCalendars, this)) + .on('keyup.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsChanged, this)) + .on('change.daterangepicker', '.daterangepicker_input input', $.proxy(this.updateFormInputs, this)); this.container.find('.ranges') .on('click.daterangepicker', 'button.applyBtn', $.proxy(this.clickApply, this)) .on('click.daterangepicker', 'button.cancelBtn', $.proxy(this.clickCancel, this)) - .on('click.daterangepicker', '.daterangepicker_start_input,.daterangepicker_end_input', $.proxy(this.showCalendars, this)) - .on('change.daterangepicker', '.daterangepicker_start_input,.daterangepicker_end_input', $.proxy(this.inputsChanged, this)) - .on('keydown.daterangepicker', '.daterangepicker_start_input,.daterangepicker_end_input', $.proxy(this.inputsKeydown, this)) .on('click.daterangepicker', 'li', $.proxy(this.clickRange, this)) - .on('mouseenter.daterangepicker', 'li', $.proxy(this.enterRange, this)) + .on('mouseenter.daterangepicker', 'li', $.proxy(this.hoverRange, this)) .on('mouseleave.daterangepicker', 'li', $.proxy(this.updateFormInputs, this)); if (this.element.is('input')) { this.element.on({ 'click.daterangepicker': $.proxy(this.show, this), 'focus.daterangepicker': $.proxy(this.show, this), - 'keyup.daterangepicker': $.proxy(this.updateFromControl, this) + 'keyup.daterangepicker': $.proxy(this.controlChanged, this), + 'keydown.daterangepicker': $.proxy(this.keydown, this) }); } else { this.element.on('click.daterangepicker', $.proxy(this.toggle, this)); } + // + // if attached to a text input, set the initial value + // + + if (this.element.is('input') && !this.singleDatePicker) { + this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format)); + this.element.trigger('change'); + } else if (this.element.is('input')) { + this.element.val(this.startDate.format(this.locale.format)); + this.element.trigger('change'); + } + }; DateRangePicker.prototype = { constructor: DateRangePicker, - setOptions: function(options, callback) { - - this.startDate = moment().startOf('day'); - this.endDate = moment().endOf('day'); - this.timeZone = moment().utcOffset(); - this.minDate = false; - this.maxDate = false; - this.dateLimit = false; - - this.showDropdowns = false; - this.showWeekNumbers = false; - this.timePicker = false; - this.timePickerSeconds = false; - this.timePickerIncrement = 30; - this.timePicker12Hour = true; - this.singleDatePicker = false; - this.ranges = {}; - - this.opens = 'right'; - if (this.element.hasClass('pull-right')) - this.opens = 'left'; - - this.buttonClasses = ['btn', 'btn-small btn-sm']; - this.applyClass = 'btn-success'; - this.cancelClass = 'btn-default'; - - this.format = 'MM/DD/YYYY'; - this.separator = ' - '; - - this.locale = { - applyLabel: 'Apply', - cancelLabel: 'Cancel', - fromLabel: 'From', - toLabel: 'To', - weekLabel: 'W', - customRangeLabel: 'Custom Range', - daysOfWeek: moment.weekdaysMin(), - monthNames: moment.monthsShort(), - firstDay: moment.localeData()._week.dow - }; - - this.cb = function () { }; - - if (typeof options.format === 'string') - this.format = options.format; - - if (typeof options.separator === 'string') - this.separator = options.separator; - - if (typeof options.startDate === 'string') - this.startDate = moment(options.startDate, this.format); - - if (typeof options.endDate === 'string') - this.endDate = moment(options.endDate, this.format); - - if (typeof options.minDate === 'string') - this.minDate = moment(options.minDate, this.format); - - if (typeof options.maxDate === 'string') - this.maxDate = moment(options.maxDate, this.format); - - if (typeof options.startDate === 'object') - this.startDate = moment(options.startDate); - - if (typeof options.endDate === 'object') - this.endDate = moment(options.endDate); - - if (typeof options.minDate === 'object') - this.minDate = moment(options.minDate); - - if (typeof options.maxDate === 'object') - this.maxDate = moment(options.maxDate); - - if (typeof options.applyClass === 'string') - this.applyClass = options.applyClass; - - if (typeof options.cancelClass === 'string') - this.cancelClass = options.cancelClass; - - if (typeof options.dateLimit === 'object') - this.dateLimit = options.dateLimit; - - if (typeof options.locale === 'object') { - - if (typeof options.locale.daysOfWeek === 'object') { - // Create a copy of daysOfWeek to avoid modification of original - // options object for reusability in multiple daterangepicker instances - this.locale.daysOfWeek = options.locale.daysOfWeek.slice(); - } - - if (typeof options.locale.monthNames === 'object') { - this.locale.monthNames = options.locale.monthNames.slice(); - } - - if (typeof options.locale.firstDay === 'number') { - this.locale.firstDay = options.locale.firstDay; - } - - if (typeof options.locale.applyLabel === 'string') { - this.locale.applyLabel = options.locale.applyLabel; - } - - if (typeof options.locale.cancelLabel === 'string') { - this.locale.cancelLabel = options.locale.cancelLabel; - } - - if (typeof options.locale.fromLabel === 'string') { - this.locale.fromLabel = options.locale.fromLabel; - } - - if (typeof options.locale.toLabel === 'string') { - this.locale.toLabel = options.locale.toLabel; - } - - if (typeof options.locale.weekLabel === 'string') { - this.locale.weekLabel = options.locale.weekLabel; - } - - if (typeof options.locale.customRangeLabel === 'string') { - this.locale.customRangeLabel = options.locale.customRangeLabel; - } - } - - if (typeof options.opens === 'string') - this.opens = options.opens; - - if (typeof options.showWeekNumbers === 'boolean') { - this.showWeekNumbers = options.showWeekNumbers; - } - - if (typeof options.buttonClasses === 'string') { - this.buttonClasses = [options.buttonClasses]; - } - - if (typeof options.buttonClasses === 'object') { - this.buttonClasses = options.buttonClasses; - } - - if (typeof options.showDropdowns === 'boolean') { - this.showDropdowns = options.showDropdowns; - } - - if (typeof options.singleDatePicker === 'boolean') { - this.singleDatePicker = options.singleDatePicker; - if (this.singleDatePicker) { - this.endDate = this.startDate.clone(); - } - } - - if (typeof options.timePicker === 'boolean') { - this.timePicker = options.timePicker; - } - - if (typeof options.timePickerSeconds === 'boolean') { - this.timePickerSeconds = options.timePickerSeconds; - } - - if (typeof options.timePickerIncrement === 'number') { - this.timePickerIncrement = options.timePickerIncrement; - } - - if (typeof options.timePicker12Hour === 'boolean') { - this.timePicker12Hour = options.timePicker12Hour; - } - - // update day names order to firstDay - if (this.locale.firstDay != 0) { - var iterator = this.locale.firstDay; - while (iterator > 0) { - this.locale.daysOfWeek.push(this.locale.daysOfWeek.shift()); - iterator--; - } - } - - var start, end, range; - - //if no start/end dates set, check if an input element contains initial values - if (typeof options.startDate === 'undefined' && typeof options.endDate === 'undefined') { - if ($(this.element).is('input[type=text]')) { - var val = $(this.element).val(), - split = val.split(this.separator); - - start = end = null; - - if (split.length == 2) { - start = moment(split[0], this.format); - end = moment(split[1], this.format); - } else if (this.singleDatePicker && val !== "") { - start = moment(val, this.format); - end = moment(val, this.format); - } - if (start !== null && end !== null) { - this.startDate = start; - this.endDate = end; - } - } - } - - // bind the time zone used to build the calendar to either the timeZone passed in through the options or the zone of the startDate (which will be the local time zone by default) - if (typeof options.timeZone === 'string' || typeof options.timeZone === 'number') { - this.timeZone = options.timeZone; - this.startDate.utcOffset(this.timeZone); - this.endDate.utcOffset(this.timeZone); - } else { - this.timeZone = moment(this.startDate).utcOffset(); - } - - if (typeof options.ranges === 'object') { - for (range in options.ranges) { - - if (typeof options.ranges[range][0] === 'string') - start = moment(options.ranges[range][0], this.format); - else - start = moment(options.ranges[range][0]); - - if (typeof options.ranges[range][1] === 'string') - end = moment(options.ranges[range][1], this.format); - else - end = moment(options.ranges[range][1]); - - // If we have a min/max date set, bound this range - // to it, but only if it would otherwise fall - // outside of the min/max. - if (this.minDate && start.isBefore(this.minDate)) - start = moment(this.minDate); - - if (this.maxDate && end.isAfter(this.maxDate)) - end = moment(this.maxDate); - - // If the end of the range is before the minimum (if min is set) OR - // the start of the range is after the max (also if set) don't display this - // range option. - if ((this.minDate && end.isBefore(this.minDate)) || (this.maxDate && start.isAfter(this.maxDate))) { - continue; - } - - this.ranges[range] = [start, end]; - } - - var list = ''; - this.container.find('.ranges ul').remove(); - this.container.find('.ranges').prepend(list); - } - - if (typeof callback === 'function') { - this.cb = callback; - } - - if (!this.timePicker) { - this.startDate = this.startDate.startOf('day'); - this.endDate = this.endDate.endOf('day'); - } - - if (this.singleDatePicker) { - this.opens = 'right'; - this.container.addClass('single'); - this.container.find('.calendar.right').show(); - this.container.find('.calendar.left').hide(); - if (!this.timePicker) { - this.container.find('.ranges').hide(); - } else { - this.container.find('.ranges .daterangepicker_start_input, .ranges .daterangepicker_end_input').hide(); - } - if (!this.container.find('.calendar.right').hasClass('single')) - this.container.find('.calendar.right').addClass('single'); - } else { - this.container.removeClass('single'); - this.container.find('.calendar.right').removeClass('single'); - this.container.find('.ranges').show(); - } - - this.oldStartDate = this.startDate.clone(); - this.oldEndDate = this.endDate.clone(); - this.oldChosenLabel = this.chosenLabel; - - this.leftCalendar = { - month: moment([this.startDate.year(), this.startDate.month(), 1, this.startDate.hour(), this.startDate.minute(), this.startDate.second()]), - calendar: [] - }; - - this.rightCalendar = { - month: moment([this.endDate.year(), this.endDate.month(), 1, this.endDate.hour(), this.endDate.minute(), this.endDate.second()]), - calendar: [] - }; - - if (this.opens == 'right' || this.opens == 'center') { - //swap calendar positions - var first = this.container.find('.calendar.first'); - var second = this.container.find('.calendar.second'); - - if (second.hasClass('single')) { - second.removeClass('single'); - first.addClass('single'); - } - - first.removeClass('left').addClass('right'); - second.removeClass('right').addClass('left'); - - if (this.singleDatePicker) { - first.show(); - second.hide(); - } - } - - if (typeof options.ranges === 'undefined' && !this.singleDatePicker) { - this.container.addClass('show-calendar'); - } - - this.container.addClass('opens' + this.opens); - - this.updateView(); - this.updateCalendars(); - - }, - setStartDate: function(startDate) { if (typeof startDate === 'string') - this.startDate = moment(startDate, this.format).utcOffset(this.timeZone); + this.startDate = moment(startDate, this.locale.format).utcOffset(this.timeZone); if (typeof startDate === 'object') this.startDate = moment(startDate); @@ -454,16 +445,21 @@ if (!this.timePicker) this.startDate = this.startDate.startOf('day'); - this.oldStartDate = this.startDate.clone(); + if (this.timePicker && this.timePickerIncrement) + this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); - this.updateView(); - this.updateCalendars(); - this.updateInputText(); + if (this.minDate && this.startDate.isBefore(this.minDate)) + this.startDate = this.minDate; + + if (this.maxDate && this.startDate.isAfter(this.maxDate)) + this.startDate = this.maxDate; + + this.updateMonthsInView(); }, setEndDate: function(endDate) { if (typeof endDate === 'string') - this.endDate = moment(endDate, this.format).utcOffset(this.timeZone); + this.endDate = moment(endDate, this.locale.format).utcOffset(this.timeZone); if (typeof endDate === 'object') this.endDate = moment(endDate); @@ -471,69 +467,489 @@ if (!this.timePicker) this.endDate = this.endDate.endOf('day'); - this.oldEndDate = this.endDate.clone(); + if (this.timePicker && this.timePickerIncrement) + this.endDate.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); - this.updateView(); - this.updateCalendars(); - this.updateInputText(); + if (this.endDate.isBefore(this.startDate)) + this.endDate = this.startDate.clone(); + + if (this.maxDate && this.endDate.isAfter(this.maxDate)) + this.endDate = this.maxDate; + + if (this.dateLimit && this.startDate.clone().add(this.dateLimit).isBefore(this.endDate)) + this.endDate = this.startDate.clone().add(this.dateLimit); + + this.updateMonthsInView(); }, - updateView: function () { - this.leftCalendar.month.month(this.startDate.month()).year(this.startDate.year()).hour(this.startDate.hour()).minute(this.startDate.minute()); - this.rightCalendar.month.month(this.endDate.month()).year(this.endDate.year()).hour(this.endDate.hour()).minute(this.endDate.minute()); + updateView: function() { + if (this.timePicker) { + this.renderTimePicker('left'); + this.renderTimePicker('right'); + if (!this.endDate) { + this.container.find('.right .calendar-time select').attr('disabled', 'disabled').addClass('disabled'); + } else { + this.container.find('.right .calendar-time select').removeAttr('disabled').removeClass('disabled'); + } + } + if (this.endDate) { + this.container.find('input[name="daterangepicker_end"]').removeClass('active'); + this.container.find('input[name="daterangepicker_start"]').addClass('active'); + } else { + this.container.find('input[name="daterangepicker_end"]').addClass('active'); + this.container.find('input[name="daterangepicker_start"]').removeClass('active'); + } + this.updateMonthsInView(); + this.updateCalendars(); this.updateFormInputs(); }, - updateFormInputs: function () { - this.container.find('input[name=daterangepicker_start]').val(this.startDate.format(this.format)); - this.container.find('input[name=daterangepicker_end]').val(this.endDate.format(this.format)); + updateMonthsInView: function() { + if (this.endDate) { + this.leftCalendar.month = this.startDate.clone().date(2); + if (!this.linkedCalendars && (this.endDate.month() != this.startDate.month() || this.endDate.year() != this.startDate.year())) { + this.rightCalendar.month = this.endDate.clone().date(2); + } else { + this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month'); + } + } else { + if (this.leftCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM') && this.rightCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM')) { + this.leftCalendar.month = this.startDate.clone().date(2); + this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month'); + } + } + }, - if (this.startDate.isSame(this.endDate) || this.startDate.isBefore(this.endDate)) { + updateCalendars: function() { + + if (this.timePicker) { + var hour, minute, second; + if (this.endDate) { + hour = parseInt(this.container.find('.left .hourselect').val(), 10); + minute = parseInt(this.container.find('.left .minuteselect').val(), 10); + second = this.timePickerSeconds ? parseInt(this.container.find('.left .secondselect').val(), 10) : 0; + if (!this.timePicker24Hour) { + var ampm = this.container.find('.left .ampmselect').val(); + if (ampm === 'PM' && hour < 12) + hour += 12; + if (ampm === 'AM' && hour === 12) + hour = 0; + } + } else { + hour = parseInt(this.container.find('.right .hourselect').val(), 10); + minute = parseInt(this.container.find('.right .minuteselect').val(), 10); + second = this.timePickerSeconds ? parseInt(this.container.find('.right .secondselect').val(), 10) : 0; + if (!this.timePicker24Hour) { + var ampm = this.container.find('.left .ampmselect').val(); + if (ampm === 'PM' && hour < 12) + hour += 12; + if (ampm === 'AM' && hour === 12) + hour = 0; + } + } + this.leftCalendar.month.hour(hour).minute(minute).second(second); + this.rightCalendar.month.hour(hour).minute(minute).second(second); + } + + this.renderCalendar('left'); + this.renderCalendar('right'); + + //highlight any predefined range matching the current start and end dates + this.container.find('.ranges li').removeClass('active'); + if (this.endDate == null) return; + + var customRange = true; + var i = 0; + for (var range in this.ranges) { + if (this.timePicker) { + if (this.startDate.isSame(this.ranges[range][0]) && this.endDate.isSame(this.ranges[range][1])) { + customRange = false; + this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').html(); + break; + } + } else { + //ignore times when comparing dates if time picker is not enabled + if (this.startDate.format('YYYY-MM-DD') == this.ranges[range][0].format('YYYY-MM-DD') && this.endDate.format('YYYY-MM-DD') == this.ranges[range][1].format('YYYY-MM-DD')) { + customRange = false; + this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').html(); + break; + } + } + i++; + } + if (customRange) { + this.chosenLabel = this.container.find('.ranges li:last').addClass('active').html(); + this.showCalendars(); + } + + }, + + renderCalendar: function(side) { + + // + // Build the matrix of dates that will populate the calendar + // + + var calendar = side == 'left' ? this.leftCalendar : this.rightCalendar; + var month = calendar.month.month(); + var year = calendar.month.year(); + 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 dayOfWeek = firstDay.day(); + + //initialize a 6 rows x 7 columns array for the calendar + var calendar = []; + calendar.firstDay = firstDay; + calendar.lastDay = lastDay; + + for (var i = 0; i < 6; i++) { + calendar[i] = []; + } + + //populate the calendar with date objects + var startDay = daysInLastMonth - dayOfWeek + this.locale.firstDay + 1; + if (startDay > daysInLastMonth) + startDay -= 7; + + if (dayOfWeek == this.locale.firstDay) + startDay = daysInLastMonth - 6; + + // Possible patch for issue #626 https://github.com/dangrossman/bootstrap-daterangepicker/issues/626 + var curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]); // .utcOffset(this.timeZone); + + var col, row; + for (var i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add(24, 'hour')) { + if (i > 0 && col % 7 === 0) { + col = 0; + row++; + } + calendar[row][col] = curDate.clone().hour(hour).minute(minute).second(second); + curDate.hour(12); + + if (this.minDate && calendar[row][col].format('YYYY-MM-DD') == this.minDate.format('YYYY-MM-DD') && calendar[row][col].isBefore(this.minDate) && side == 'left') { + calendar[row][col] = this.minDate.clone(); + } + + if (this.maxDate && calendar[row][col].format('YYYY-MM-DD') == this.maxDate.format('YYYY-MM-DD') && calendar[row][col].isAfter(this.maxDate) && side == 'right') { + calendar[row][col] = this.maxDate.clone(); + } + + } + + //make the calendar object available to hoverDate/clickDate + if (side == 'left') { + this.leftCalendar.calendar = calendar; + } else { + this.rightCalendar.calendar = calendar; + } + + // + // Display the calendar + // + + var minDate = side == 'left' ? this.minDate : this.startDate; + var maxDate = this.maxDate; + var selected = side == 'left' ? this.startDate : this.endDate; + + var html = ''; + html += ''; + html += ''; + + // add empty cell for week number + if (this.showWeekNumbers) + html += ''; + + if ((!minDate || minDate.isBefore(calendar.firstDay)) && (!this.linkedCalendars || side == 'left')) { + html += ''; + } else { + html += ''; + } + + var dateHtml = this.locale.monthNames[calendar[1][1].month()] + calendar[1][1].format(" YYYY"); + + if (this.showDropdowns) { + var currentMonth = calendar[1][1].month(); + var currentYear = calendar[1][1].year(); + var maxYear = (maxDate && maxDate.year()) || (currentYear + 5); + var minYear = (minDate && minDate.year()) || (currentYear - 50); + var inMinYear = currentYear == minYear; + var inMaxYear = currentYear == maxYear; + + var monthHtml = '"; + + var yearHtml = ''; + + dateHtml = monthHtml + yearHtml; + } + + html += ''; + if ((!maxDate || maxDate.isAfter(calendar.lastDay)) && (!this.linkedCalendars || side == 'right' || this.singleDatePicker)) { + html += ''; + } else { + html += ''; + } + + html += ''; + html += ''; + + // add week number label + if (this.showWeekNumbers) + html += ''; + + $.each(this.locale.daysOfWeek, function(index, dayOfWeek) { + html += ''; + }); + + html += ''; + html += ''; + html += ''; + + //adjust maxDate to reflect the dateLimit setting in order to + //grey out end dates beyond the dateLimit + if (this.endDate == null && this.dateLimit) { + var maxLimit = this.startDate.clone().add(this.dateLimit).endOf('day'); + if (!maxDate || maxLimit.isBefore(maxDate)) { + maxDate = maxLimit; + } + } + + for (var row = 0; row < 6; row++) { + html += ''; + + // add week number + if (this.showWeekNumbers) + html += ''; + + for (var col = 0; col < 7; col++) { + + var classes = []; + + //highlight today's date + if (calendar[row][col].isSame(new Date(), "day")) + classes.push('today'); + + //highlight weekends + if (calendar[row][col].isoWeekday() > 5) + classes.push('weekend'); + + //grey out the dates in other months displayed at beginning and end of this calendar + if (calendar[row][col].month() != calendar[1][1].month()) + classes.push('off'); + + //don't allow selection of dates before the minimum date + if (this.minDate && calendar[row][col].isBefore(this.minDate, 'day')) + classes.push('off', 'disabled'); + + //don't allow selection of dates after the maximum date + if (maxDate && calendar[row][col].isAfter(maxDate, 'day')) + classes.push('off', 'disabled'); + + //highlight the currently selected start date + if (calendar[row][col].format('YYYY-MM-DD') == this.startDate.format('YYYY-MM-DD')) + classes.push('active', 'start-date'); + + //highlight the currently selected end date + if (this.endDate != null && calendar[row][col].format('YYYY-MM-DD') == this.endDate.format('YYYY-MM-DD')) + classes.push('active', 'end-date'); + + //highlight dates in-between the selected dates + if (this.endDate != null && calendar[row][col] > this.startDate && calendar[row][col] < this.endDate) + classes.push('in-range'); + + var cname = '', disabled = false; + for (var i = 0; i < classes.length; i++) { + cname += classes[i] + ' '; + if (classes[i] == 'disabled') + disabled = true; + } + if (!disabled) + cname += 'available'; + + html += ''; + + } + html += ''; + } + + html += ''; + html += '
' + dateHtml + '
' + this.locale.weekLabel + '' + dayOfWeek + '
' + calendar[row][0].week() + '' + calendar[row][col].date() + '
'; + + this.container.find('.calendar.' + side + ' .calendar-table').html(html); + + }, + + renderTimePicker: function(side) { + + var selected, minDate, maxDate = this.maxDate; + + if (this.dateLimit && (!this.maxDate || this.startDate.clone().add(this.dateLimit).isAfter(this.maxDate))) + maxDate = this.startDate.clone().add(this.dateLimit); + + if (side == 'left') { + selected = this.startDate.clone(); + minDate = this.minDate; + } else if (side == 'right') { + selected = this.endDate ? this.endDate.clone() : this.startDate.clone(); + minDate = this.startDate; + } + + // + // hours + // + + html = ' '; + + // + // minutes + // + + html += ': '; + + // + // seconds + // + + if (this.timePickerSeconds) { + html += ': '; + } + + // + // AM/PM + // + + if (!this.timePicker24Hour) { + html += ''; + } + + this.container.find('.calendar.' + side + ' .calendar-time div').html(html); + + }, + + updateFormInputs: function() { + this.container.find('input[name=daterangepicker_start]').val(this.startDate.format(this.locale.format)); + if (this.endDate) + this.container.find('input[name=daterangepicker_end]').val(this.endDate.format(this.locale.format)); + + if (this.singleDatePicker || (this.endDate && (this.startDate.isBefore(this.endDate) || this.startDate.isSame(this.endDate)))) { this.container.find('button.applyBtn').removeAttr('disabled'); } else { this.container.find('button.applyBtn').attr('disabled', 'disabled'); } }, - updateFromControl: function () { - if (!this.element.is('input')) return; - if (!this.element.val().length) return; - - var dateString = this.element.val().split(this.separator), - start = null, - end = null; - - if(dateString.length === 2) { - start = moment(dateString[0], this.format).utcOffset(this.timeZone); - end = moment(dateString[1], this.format).utcOffset(this.timeZone); - } - - if (this.singleDatePicker || start === null || end === null) { - start = moment(this.element.val(), this.format).utcOffset(this.timeZone); - end = start; - } - - if (end.isBefore(start)) return; - - this.oldStartDate = this.startDate.clone(); - this.oldEndDate = this.endDate.clone(); - - this.startDate = start; - this.endDate = end; - - if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate)) - this.notify(); - - this.updateCalendars(); - }, - - notify: function () { - this.updateView(); - this.cb(this.startDate, this.endDate, this.chosenLabel); - }, - - move: function () { - var parentOffset = { top: 0, left: 0 }; + move: function() { + var parentOffset = { top: 0, left: 0 }, + containerTop; var parentRightEdge = $(window).width(); if (!this.parentEl.is('body')) { parentOffset = { @@ -543,9 +959,15 @@ parentRightEdge = this.parentEl[0].clientWidth + this.parentEl.offset().left; } + if (this.drops == 'up') + containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top; + else + containerTop = this.element.offset().top + this.element.outerHeight() - parentOffset.top; + this.container[this.drops == 'up' ? 'addClass' : 'removeClass']('dropup'); + if (this.opens == 'left') { this.container.css({ - top: this.element.offset().top + this.element.outerHeight() - parentOffset.top, + top: containerTop, right: parentRightEdge - this.element.offset().left - this.element.outerWidth(), left: 'auto' }); @@ -557,7 +979,7 @@ } } else if (this.opens == 'center') { this.container.css({ - top: this.element.offset().top + this.element.outerHeight() - parentOffset.top, + top: containerTop, left: this.element.offset().left - parentOffset.left + this.element.outerWidth() / 2 - this.container.outerWidth() / 2, right: 'auto' @@ -570,7 +992,7 @@ } } else { this.container.css({ - top: this.element.offset().top + this.element.outerHeight() - parentOffset.top, + top: containerTop, left: this.element.offset().left - parentOffset.left, right: 'auto' }); @@ -583,23 +1005,11 @@ } }, - toggle: function (e) { - if (this.element.hasClass('active')) { - this.hide(); - } else { - this.show(); - } - }, - - show: function (e) { + show: function(e) { if (this.isShowing) return; - this.element.addClass('active'); - this.container.show(); - this.move(); - // Create a click proxy that is private to this instance of datepicker, for unbinding - this._outsideClickProxy = $.proxy(function (e) { this.outsideClick(e); }, this); + this._outsideClickProxy = $.proxy(function(e) { this.outsideClick(e); }, this); // Bind global datepicker mousedown for hiding and $(document) .on('mousedown.daterangepicker', this._outsideClickProxy) @@ -610,11 +1020,53 @@ // and also close when focus changes to outside the picker (eg. tabbing between controls) .on('focusin.daterangepicker', this._outsideClickProxy); - this.isShowing = true; + this.oldStartDate = this.startDate.clone(); + this.oldEndDate = this.endDate.clone(); + + this.updateView(); + this.container.show(); + this.move(); this.element.trigger('show.daterangepicker', this); + this.isShowing = true; }, - outsideClick: function (e) { + hide: function(e) { + if (!this.isShowing) return; + + //incomplete date selection, revert to last values + if (!this.endDate) { + this.startDate = this.oldStartDate.clone(); + this.endDate = this.oldEndDate.clone(); + } + + //if a new date range was selected, invoke the user callback function + if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate)) + this.callback(this.startDate, this.endDate, this.chosenLabel); + + //if picker is attached to a text input, update it + if (this.element.is('input') && !this.singleDatePicker) { + this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format)); + this.element.trigger('change'); + } else if (this.element.is('input')) { + this.element.val(this.startDate.format(this.locale.format)); + this.element.trigger('change'); + } + + $(document).off('.daterangepicker'); + this.container.hide(); + this.element.trigger('hide.daterangepicker', this); + this.isShowing = false; + }, + + toggle: function(e) { + if (this.isShowing) { + this.hide(); + } else { + this.show(); + } + }, + + outsideClick: function(e) { var target = $(e.target); // if the page is clicked anywhere except within the daterangerpicker/button // itself then call this.hide() @@ -623,42 +1075,11 @@ e.type == "focusin" || target.closest(this.element).length || target.closest(this.container).length || - target.closest('.calendar-date').length + target.closest('.calendar-table').length ) return; this.hide(); }, - hide: function (e) { - if (!this.isShowing) return; - - $(document) - .off('.daterangepicker'); - - this.element.removeClass('active'); - this.container.hide(); - - if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate)) - this.notify(); - - this.oldStartDate = this.startDate.clone(); - this.oldEndDate = this.endDate.clone(); - - this.isShowing = false; - this.element.trigger('hide.daterangepicker', this); - }, - - enterRange: function (e) { - // mouse pointer has entered a range label - var label = e.target.innerHTML; - if (label == this.locale.customRangeLabel) { - this.updateView(); - } else { - var dates = this.ranges[label]; - this.container.find('input[name=daterangepicker_start]').val(dates[0].format(this.format)); - this.container.find('input[name=daterangepicker_end]').val(dates[1].format(this.format)); - } - }, - showCalendars: function() { this.container.addClass('show-calendar'); this.move(); @@ -670,48 +1091,24 @@ this.element.trigger('hideCalendar.daterangepicker', this); }, - // when a date is typed into the start to end date textboxes - inputsChanged: function (e) { - var el = $(e.target); - var date = moment(el.val(), this.format); - if (!date.isValid()) return; - - var startDate, endDate; - if (el.attr('name') === 'daterangepicker_start') { - startDate = (false !== this.minDate && date.isBefore(this.minDate)) ? this.minDate : date; - endDate = this.endDate; + hoverRange: function(e) { + var label = e.target.innerHTML; + if (label == this.locale.customRangeLabel) { + this.updateView(); } else { - startDate = this.startDate; - endDate = (false !== this.maxDate && date.isAfter(this.maxDate)) ? this.maxDate : date; - } - this.setCustomDates(startDate, endDate); - }, - - inputsKeydown: function(e) { - if (e.keyCode === 13) { - this.inputsChanged(e); - this.notify(); + var dates = this.ranges[label]; + this.container.find('input[name=daterangepicker_start]').val(dates[0].format(this.locale.format)); + this.container.find('input[name=daterangepicker_end]').val(dates[1].format(this.locale.format)); } }, - updateInputText: function() { - if (this.element.is('input') && !this.singleDatePicker) { - this.element.val(this.startDate.format(this.format) + this.separator + this.endDate.format(this.format)); - this.element.trigger('change'); - } else if (this.element.is('input')) { - this.element.val(this.endDate.format(this.format)); - this.element.trigger('change'); - } - }, - - clickRange: function (e) { + clickRange: function(e) { var label = e.target.innerHTML; this.chosenLabel = label; if (label == this.locale.customRangeLabel) { this.showCalendars(); } else { var dates = this.ranges[label]; - this.startDate = dates[0]; this.endDate = dates[1]; @@ -720,130 +1117,156 @@ this.endDate.endOf('day'); } - this.leftCalendar.month.month(this.startDate.month()).year(this.startDate.year()).hour(this.startDate.hour()).minute(this.startDate.minute()); - this.rightCalendar.month.month(this.endDate.month()).year(this.endDate.year()).hour(this.endDate.hour()).minute(this.endDate.minute()); - this.updateCalendars(); - - this.updateInputText(); - this.hideCalendars(); - this.hide(); - this.element.trigger('apply.daterangepicker', this); + this.clickApply(); } }, - clickPrev: function (e) { + clickPrev: function(e) { var cal = $(e.target).parents('.calendar'); if (cal.hasClass('left')) { this.leftCalendar.month.subtract(1, 'month'); + if (this.linkedCalendars) + this.rightCalendar.month.subtract(1, 'month'); } else { this.rightCalendar.month.subtract(1, 'month'); } this.updateCalendars(); }, - clickNext: function (e) { + clickNext: function(e) { var cal = $(e.target).parents('.calendar'); if (cal.hasClass('left')) { this.leftCalendar.month.add(1, 'month'); } else { this.rightCalendar.month.add(1, 'month'); + if (this.linkedCalendars) + this.leftCalendar.month.add(1, 'month'); } this.updateCalendars(); }, - hoverDate: function (e) { + hoverDate: function(e) { + + //ignore dates that can't be selected + if (!$(e.target).hasClass('available')) return; + + //have the text inputs above calendars reflect the date being hovered over var title = $(e.target).attr('data-title'); var row = title.substr(1, 1); var col = title.substr(3, 1); var cal = $(e.target).parents('.calendar'); + var date = cal.hasClass('left') ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col]; - if (cal.hasClass('left')) { - this.container.find('input[name=daterangepicker_start]').val(this.leftCalendar.calendar[row][col].format(this.format)); + if (this.endDate) { + this.container.find('input[name=daterangepicker_start]').val(date.format(this.locale.format)); } else { - this.container.find('input[name=daterangepicker_end]').val(this.rightCalendar.calendar[row][col].format(this.format)); + this.container.find('input[name=daterangepicker_end]').val(date.format(this.locale.format)); } + + //highlight the dates between the start date and the date being hovered as a potential end date + var leftCalendar = this.leftCalendar; + var rightCalendar = this.rightCalendar; + var startDate = this.startDate; + if (!this.endDate) { + this.container.find('.calendar td').each(function(index, el) { + + //skip week numbers, only look at dates + if ($(el).hasClass('week')) return; + + var title = $(el).attr('data-title'); + var row = title.substr(1, 1); + var col = title.substr(3, 1); + var cal = $(el).parents('.calendar'); + var dt = cal.hasClass('left') ? leftCalendar.calendar[row][col] : rightCalendar.calendar[row][col]; + + if (dt.isAfter(startDate) && dt.isBefore(date)) { + $(el).addClass('in-range'); + } else { + $(el).removeClass('in-range'); + } + + }); + } + }, - setCustomDates: function(startDate, endDate) { - this.chosenLabel = this.locale.customRangeLabel; - if (startDate.isAfter(endDate)) { - var difference = this.endDate.diff(this.startDate); - endDate = moment(startDate).add(difference, 'ms'); - if (this.maxDate && endDate.isAfter(this.maxDate)) { - endDate = this.maxDate; + clickDate: function(e) { + + if (!$(e.target).hasClass('available')) return; + + var title = $(e.target).attr('data-title'); + var row = title.substr(1, 1); + var col = title.substr(3, 1); + var cal = $(e.target).parents('.calendar'); + var date = cal.hasClass('left') ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col]; + + // + // this function needs to do a few things: + // * alternate between selecting a start and end date for the range, + // * if the time picker is enabled, apply the hour/minute/second from the select boxes to the clicked date + // * if autoapply is enabled, and an end date was chosen, apply the selection + // * if single date picker mode, and time picker isn't enabled, apply the selection immediately + // + + if (this.endDate || date.isBefore(this.startDate)) { + if (this.timePicker) { + var hour = parseInt(this.container.find('.left .hourselect').val(), 10); + if (!this.timePicker24Hour) { + var ampm = cal.find('.ampmselect').val(); + if (ampm === 'PM' && hour < 12) + hour += 12; + if (ampm === 'AM' && hour === 12) + hour = 0; + } + var minute = parseInt(this.container.find('.left .minuteselect').val(), 10); + var second = this.timePickerSeconds ? parseInt(this.container.find('.left .secondselect').val(), 10) : 0; + date = date.clone().hour(hour).minute(minute).second(second); } + this.endDate = null; + this.setStartDate(date.clone()); + } else { + if (this.timePicker) { + var hour = parseInt(this.container.find('.right .hourselect').val(), 10); + if (!this.timePicker24Hour) { + var ampm = this.container.find('.right .ampmselect').val(); + if (ampm === 'PM' && hour < 12) + hour += 12; + if (ampm === 'AM' && hour === 12) + hour = 0; + } + var minute = parseInt(this.container.find('.right .minuteselect').val(), 10); + var second = this.timePickerSeconds ? parseInt(this.container.find('.right .secondselect').val(), 10) : 0; + date = date.clone().hour(hour).minute(minute).second(second); + } + this.setEndDate(date.clone()); + if (this.autoApply) + this.clickApply(); + } + + if (this.singleDatePicker) { + this.setEndDate(this.startDate); + if (!this.timePicker) + this.clickApply(); } - this.startDate = startDate; - this.endDate = endDate; this.updateView(); - this.updateCalendars(); + }, - clickDate: function (e) { - var title = $(e.target).attr('data-title'); - var row = title.substr(1, 1); - var col = title.substr(3, 1); - var cal = $(e.target).parents('.calendar'); - - var startDate, endDate; - if (cal.hasClass('left')) { - startDate = this.leftCalendar.calendar[row][col]; - endDate = this.endDate; - if (typeof this.dateLimit === 'object') { - var maxDate = moment(startDate).add(this.dateLimit).startOf('day'); - if (endDate.isAfter(maxDate)) { - endDate = maxDate; - } - } - } else { - startDate = this.startDate; - endDate = this.rightCalendar.calendar[row][col]; - if (typeof this.dateLimit === 'object') { - var minDate = moment(endDate).subtract(this.dateLimit).startOf('day'); - if (startDate.isBefore(minDate)) { - startDate = minDate; - } - } - } - - if (this.singleDatePicker && cal.hasClass('left')) { - endDate = startDate.clone(); - } else if (this.singleDatePicker && cal.hasClass('right')) { - startDate = endDate.clone(); - } - - cal.find('td').removeClass('active'); - - $(e.target).addClass('active'); - - this.setCustomDates(startDate, endDate); - - if (!this.timePicker) - endDate.endOf('day'); - - if (this.singleDatePicker && !this.timePicker) - this.clickApply(); - }, - - clickApply: function (e) { - this.updateInputText(); + clickApply: function(e) { this.hide(); this.element.trigger('apply.daterangepicker', this); }, - clickCancel: function (e) { + clickCancel: function(e) { this.startDate = this.oldStartDate; this.endDate = this.oldEndDate; - this.chosenLabel = this.oldChosenLabel; - this.updateView(); - this.updateCalendars(); this.hide(); this.element.trigger('cancel.daterangepicker', this); }, - updateMonthYear: function (e) { + monthOrYearChanged: function(e) { var isLeft = $(e.target).closest('.calendar').hasClass('left'), leftOrRight = isLeft ? 'left' : 'right', cal = this.container.find('.calendar.'+leftOrRight); @@ -873,25 +1296,28 @@ } } - - this[leftOrRight+'Calendar'].month.month(month).year(year); + if (isLeft) { + 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); + if (this.linkedCalendars) + this.leftCalendar.month = this.rightCalendar.month.clone().subtract(1, 'month'); + } this.updateCalendars(); }, - updateTime: function(e) { + timeChanged: function(e) { var cal = $(e.target).closest('.calendar'), isLeft = cal.hasClass('left'); var hour = parseInt(cal.find('.hourselect').val(), 10); var minute = parseInt(cal.find('.minuteselect').val(), 10); - var second = 0; + var second = this.timePickerSeconds ? parseInt(cal.find('.secondselect').val(), 10) : 0; - if (this.timePickerSeconds) { - second = parseInt(cal.find('.secondselect').val(), 10); - } - - if (this.timePicker12Hour) { + if (!this.timePicker24Hour) { var ampm = cal.find('.ampmselect').val(); if (ampm === 'PM' && hour < 12) hour += 12; @@ -904,375 +1330,101 @@ start.hour(hour); start.minute(minute); start.second(second); - this.startDate = start; - this.leftCalendar.month.hour(hour).minute(minute).second(second); + this.setStartDate(start); if (this.singleDatePicker) - this.endDate = start.clone(); - } else { + this.endDate = this.startDate.clone(); + } else if (this.endDate) { var end = this.endDate.clone(); end.hour(hour); end.minute(minute); end.second(second); - this.endDate = end; - if (this.singleDatePicker) - this.startDate = end.clone(); - this.rightCalendar.month.hour(hour).minute(minute).second(second); + this.setEndDate(end); } - this.updateView(); + //update the calendars so all clickable dates reflect the new time component this.updateCalendars(); + + //update the form inputs above the calendars with the new time + this.updateFormInputs(); + + //re-render the time pickers because changing one selection can affect what's enabled in another + this.renderTimePicker('left'); + this.renderTimePicker('right'); + }, - updateCalendars: function () { - this.leftCalendar.calendar = this.buildCalendar(this.leftCalendar.month.month(), this.leftCalendar.month.year(), this.leftCalendar.month.hour(), this.leftCalendar.month.minute(), this.leftCalendar.month.second(), 'left'); - this.rightCalendar.calendar = this.buildCalendar(this.rightCalendar.month.month(), this.rightCalendar.month.year(), this.rightCalendar.month.hour(), this.rightCalendar.month.minute(), this.rightCalendar.month.second(), 'right'); - this.container.find('.calendar.left').empty().html(this.renderCalendar(this.leftCalendar.calendar, this.startDate, this.minDate, this.maxDate, 'left')); - this.container.find('.calendar.right').empty().html(this.renderCalendar(this.rightCalendar.calendar, this.endDate, this.singleDatePicker ? this.minDate : this.startDate, this.maxDate, 'right')); + formInputsChanged: function(e) { + var isRight = $(e.target).closest('.calendar').hasClass('right'); + var start = moment(this.container.find('input[name="daterangepicker_start"]').val(), this.locale.format); + var end = moment(this.container.find('input[name="daterangepicker_end"]').val(), this.locale.format); - this.container.find('.ranges li').removeClass('active'); - var customRange = true; - var i = 0; - for (var range in this.ranges) { - if (this.timePicker) { - if (this.startDate.isSame(this.ranges[range][0]) && this.endDate.isSame(this.ranges[range][1])) { - customRange = false; - this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')') - .addClass('active').html(); - } + if (start.isValid() && end.isValid()) { + + if (isRight && end.isBefore(start)) + start = end.clone(); + + this.setStartDate(start); + this.setEndDate(end); + + if (isRight) { + this.container.find('input[name="daterangepicker_start"]').val(this.startDate.format(this.locale.format)); } else { - //ignore times when comparing dates if time picker is not enabled - if (this.startDate.format('YYYY-MM-DD') == this.ranges[range][0].format('YYYY-MM-DD') && this.endDate.format('YYYY-MM-DD') == this.ranges[range][1].format('YYYY-MM-DD')) { - customRange = false; - this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')') - .addClass('active').html(); - } - } - i++; - } - if (customRange) { - this.chosenLabel = this.container.find('.ranges li:last').addClass('active').html(); - this.showCalendars(); - } - }, - - buildCalendar: function (month, year, hour, minute, second, side) { - 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 dayOfWeek = firstDay.day(); - - var i; - - //initialize a 6 rows x 7 columns array for the calendar - var calendar = []; - calendar.firstDay = firstDay; - calendar.lastDay = lastDay; - - for (i = 0; i < 6; i++) { - calendar[i] = []; - } - - //populate the calendar with date objects - var startDay = daysInLastMonth - dayOfWeek + this.locale.firstDay + 1; - if (startDay > daysInLastMonth) - startDay -= 7; - - if (dayOfWeek == this.locale.firstDay) - startDay = daysInLastMonth - 6; - - var curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]).utcOffset(this.timeZone); - - var col, row; - for (i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add(24, 'hour')) { - if (i > 0 && col % 7 === 0) { - col = 0; - row++; - } - calendar[row][col] = curDate.clone().hour(hour); - curDate.hour(12); - - if (this.minDate && calendar[row][col].format('YYYY-MM-DD') == this.minDate.format('YYYY-MM-DD') && calendar[row][col].isBefore(this.minDate) && side == 'left') { - calendar[row][col] = this.minDate.clone(); - } - - if (this.maxDate && calendar[row][col].format('YYYY-MM-DD') == this.maxDate.format('YYYY-MM-DD') && calendar[row][col].isAfter(this.maxDate) && side == 'right') { - calendar[row][col] = this.maxDate.clone(); + this.container.find('input[name="daterangepicker_end"]').val(this.endDate.format(this.locale.format)); } } - return calendar; - }, - - renderDropdowns: function (selected, minDate, maxDate) { - var currentMonth = selected.month(); - var currentYear = selected.year(); - var maxYear = (maxDate && maxDate.year()) || (currentYear + 5); - var minYear = (minDate && minDate.year()) || (currentYear - 50); - - var monthHtml = '"; - - var yearHtml = ''; - - return monthHtml + yearHtml; - }, - - renderCalendar: function (calendar, selected, minDate, maxDate, side) { - - var html = '
'; - html += ''; - html += ''; - html += ''; - - // add empty cell for week number - if (this.showWeekNumbers) - html += ''; - - if (!minDate || minDate.isBefore(calendar.firstDay)) { - html += ''; - } else { - html += ''; - } - - var dateHtml = this.locale.monthNames[calendar[1][1].month()] + calendar[1][1].format(" YYYY"); - - if (this.showDropdowns) { - dateHtml = this.renderDropdowns(calendar[1][1], minDate, maxDate); - } - - html += ''; - if (!maxDate || maxDate.isAfter(calendar.lastDay)) { - html += ''; - } else { - html += ''; - } - - html += ''; - html += ''; - - // add week number label - if (this.showWeekNumbers) - html += ''; - - $.each(this.locale.daysOfWeek, function (index, dayOfWeek) { - html += ''; - }); - - html += ''; - html += ''; - html += ''; - - for (var row = 0; row < 6; row++) { - html += ''; - - // add week number - if (this.showWeekNumbers) - html += ''; - - for (var col = 0; col < 7; col++) { - var cname = 'available '; - cname += (calendar[row][col].month() == calendar[1][1].month()) ? '' : 'off'; - - if ((minDate && calendar[row][col].isBefore(minDate, 'day')) || (maxDate && calendar[row][col].isAfter(maxDate, 'day'))) { - cname = ' off disabled '; - } else if (calendar[row][col].format('YYYY-MM-DD') == selected.format('YYYY-MM-DD')) { - cname += ' active '; - if (calendar[row][col].format('YYYY-MM-DD') == this.startDate.format('YYYY-MM-DD')) { - cname += ' start-date '; - } - if (calendar[row][col].format('YYYY-MM-DD') == this.endDate.format('YYYY-MM-DD')) { - cname += ' end-date '; - } - } else if (calendar[row][col] >= this.startDate && calendar[row][col] <= this.endDate) { - cname += ' in-range '; - if (calendar[row][col].isSame(this.startDate)) { cname += ' start-date '; } - if (calendar[row][col].isSame(this.endDate)) { cname += ' end-date '; } - } - - var title = 'r' + row + 'c' + col; - html += ''; - } - html += ''; - } - - html += ''; - html += '
' + dateHtml + '
' + this.locale.weekLabel + '' + dayOfWeek + '
' + calendar[row][0].week() + '' + calendar[row][col].date() + '
'; - html += '
'; - - var i; + this.updateCalendars(); if (this.timePicker) { + this.renderTimePicker('left'); + this.renderTimePicker('right'); + } + }, - html += '
'; - html += ' : '; - - html += ' '; - - if (this.timePickerSeconds) { - html += ': '; - } - - if (this.timePicker12Hour) { - html += ''; - } - - html += '
'; + var dateString = this.element.val().split(this.locale.separator), + start = null, + end = null; + if (dateString.length === 2) { + start = moment(dateString[0], this.locale.format).utcOffset(this.timeZone); + end = moment(dateString[1], this.locale.format).utcOffset(this.timeZone); } - return html; + if (this.singleDatePicker || start === null || end === null) { + start = moment(this.element.val(), this.locale.format).utcOffset(this.timeZone); + end = start; + } + this.setStartDate(start); + this.setEndDate(end); + this.updateView(); + }, + + keydown: function(e) { + //hide on tab or enter + if ((e.keyCode === 9) || (e.keyCode === 13)) { + this.hide(); + } }, remove: function() { - this.container.remove(); this.element.off('.daterangepicker'); - this.element.removeData('daterangepicker'); - + this.element.removeData(); } }; - $.fn.daterangepicker = function (options, cb) { - this.each(function () { + $.fn.daterangepicker = function(options, callback) { + this.each(function() { var el = $(this); if (el.data('daterangepicker')) el.data('daterangepicker').remove(); - el.data('daterangepicker', new DateRangePicker(el, options, cb)); + el.data('daterangepicker', new DateRangePicker(el, options, callback)); }); return this; }; diff --git a/public/js/firefly.js b/public/js/firefly.js index 00c86a9d60..8a46e2f354 100644 --- a/public/js/firefly.js +++ b/public/js/firefly.js @@ -8,7 +8,6 @@ $(function () { ranges[previousMonthName] = [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]; ranges[nextMonthName] = [moment().add(1, 'month').startOf('month'), moment().add(1, 'month').endOf('month')]; ranges[everything] = [firstDate, moment()]; - $('#daterange').daterangepicker( { ranges: ranges, @@ -37,8 +36,10 @@ $(function () { label: label, _token: token }).success(function () { + console.log('Succesfully sent new date range.'); window.location.reload(true); }).fail(function () { + console.log('Could not send new date range.'); alert('Could not change date range'); }); diff --git a/resources/twig/layout/default.twig b/resources/twig/layout/default.twig index 3677abd32c..457e635618 100644 --- a/resources/twig/layout/default.twig +++ b/resources/twig/layout/default.twig @@ -17,7 +17,7 @@ - + @@ -58,17 +58,17 @@
  • - + - +
  • - + - +