Date range fixes.

public/js/daterangepicker.js

@@ -1,5 +1,5 @@
 /**
-* @version: 2.0.8
+* @version: 2.0.11
 * @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
@@ -53,6 +53,7 @@
         this.timePickerIncrement = 1;
         this.timePickerSeconds = false;
         this.linkedCalendars = true;
+        this.autoUpdateInput = true;
         this.ranges = {};
 
         this.opens = 'right';
@@ -245,9 +246,15 @@
         if (typeof options.autoApply === 'boolean')
             this.autoApply = options.autoApply;
 
+        if (typeof options.autoUpdateInput === 'boolean')
+            this.autoUpdateInput = options.autoUpdateInput;
+
         if (typeof options.linkedCalendars === 'boolean')
             this.linkedCalendars = options.linkedCalendars;
 
+        if (typeof options.isInvalidDate === 'function')
+            this.isInvalidDate = options.isInvalidDate;
+
         // update day names order to firstDay
         if (this.locale.firstDay != 0) {
             var iterator = this.locale.firstDay;
@@ -332,7 +339,6 @@
             }
             list += '<li>' + this.locale.customRangeLabel + '</li>';
             list += '</ul>';
-            this.container.find('.ranges ul').remove();
             this.container.find('.ranges').prepend(list);
         }
 
@@ -371,7 +377,15 @@
             this.container.addClass('show-calendar');
         }
 
-        this.container.removeClass('opensleft opensright').addClass('opens' + this.opens);
+        this.container.addClass('opens' + this.opens);
+
+        //swap the position of the predefined ranges if opens right
+        if (typeof options.ranges !== 'undefined' && this.opens == 'right') {
+            var ranges = this.container.find('.ranges');
+            var html = ranges.clone();
+            ranges.remove();
+            this.container.find('.calendar.left').parent().prepend(html);
+        }
 
         //apply CSS classes and labels to buttons
         this.container.find('.applyBtn, .cancelBtn').addClass(this.buttonClasses);
@@ -396,8 +410,8 @@
             .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('keyup.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsChanged, this))
-            .on('change.daterangepicker', '.daterangepicker_input input', $.proxy(this.updateFormInputs, this));
+            .on('change.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsChanged, this));
 
         this.container.find('.ranges')
             .on('click.daterangepicker', 'button.applyBtn', $.proxy(this.clickApply, this))
@@ -410,7 +424,7 @@
             this.element.on({
                 'click.daterangepicker': $.proxy(this.show, this),
                 'focus.daterangepicker': $.proxy(this.show, this),
-                'keyup.daterangepicker': $.proxy(this.controlChanged, this),
+                'keyup.daterangepicker': $.proxy(this.elementChanged, this),
                 'keydown.daterangepicker': $.proxy(this.keydown, this)
             });
         } else {
@@ -421,10 +435,10 @@
         // if attached to a text input, set the initial value
         //
 
-        if (this.element.is('input') && !this.singleDatePicker) {
+        if (this.element.is('input') && !this.singleDatePicker && this.autoUpdateInput) {
             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')) {
+        } else if (this.element.is('input') && this.autoUpdateInput) {
             this.element.val(this.startDate.format(this.locale.format));
             this.element.trigger('change');
         }
@@ -454,6 +468,9 @@
             if (this.maxDate && this.startDate.isAfter(this.maxDate))
                 this.startDate = this.maxDate;
 
+            if (!this.isShowing)
+                this.updateElement();
+
             this.updateMonthsInView();
         },
 
@@ -479,9 +496,16 @@
             if (this.dateLimit && this.startDate.clone().add(this.dateLimit).isBefore(this.endDate))
                 this.endDate = this.startDate.clone().add(this.dateLimit);
 
+            if (!this.isShowing)
+                this.updateElement();
+
             this.updateMonthsInView();
         },
 
+        isInvalidDate: function() {
+            return false;
+        },
+
         updateView: function() {
             if (this.timePicker) {
                 this.renderTimePicker('left');
@@ -506,12 +530,23 @@
 
         updateMonthsInView: function() {
             if (this.endDate) {
+
+                //if both dates are visible already, do nothing
+                if (this.leftCalendar.month && this.rightCalendar.month &&
+                    (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;
+                }
+
                 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);
@@ -622,7 +657,7 @@
                 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 curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]).utcOffset(this.timeZone); // .utcOffset(this.timeZone);
 
             var col, row;
             for (var i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add(24, 'hour')) {
@@ -769,6 +804,10 @@
                     if (maxDate && calendar[row][col].isAfter(maxDate, 'day'))
                         classes.push('off', 'disabled');
 
+                    //don't allow selection of date if a custom function decides it's invalid
+                    if (this.isInvalidDate(calendar[row][col]))
+                        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');
@@ -805,7 +844,7 @@
 
         renderTimePicker: function(side) {
 
-            var selected, minDate, maxDate = this.maxDate;
+            var html, 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);
@@ -936,6 +975,11 @@
         },
 
         updateFormInputs: function() {
+
+            //ignore mouse movements while an above-calendar text input has focus
+            if (this.container.find('input[name=daterangepicker_start]').is(":focus") || this.container.find('input[name=daterangepicker_end]').is(":focus"))
+                return;
+
             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));
@@ -945,6 +989,7 @@
             } else {
                 this.container.find('button.applyBtn').attr('disabled', 'disabled');
             }
+
         },
 
         move: function() {
@@ -1044,13 +1089,7 @@
                 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.updateElement();
-                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();
@@ -1092,6 +1131,11 @@
         },
 
         hoverRange: function(e) {
+
+            //ignore mouse movements while an above-calendar text input has focus
+            if (this.container.find('input[name=daterangepicker_start]').is(":focus") || this.container.find('input[name=daterangepicker_end]').is(":focus"))
+                return;
+
             var label = e.target.innerHTML;
             if (label == this.locale.customRangeLabel) {
                 this.updateView();
@@ -1100,6 +1144,7 @@
                 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));
             }
+            
         },
 
         clickRange: function(e) {
@@ -1148,6 +1193,10 @@
 
         hoverDate: function(e) {
 
+            //ignore mouse movements while an above-calendar text input has focus
+            if (this.container.find('input[name=daterangepicker_start]').is(":focus") || this.container.find('input[name=daterangepicker_end]').is(":focus"))
+                return;
+
             //ignore dates that can't be selected
             if (!$(e.target).hasClass('available')) return;
 
@@ -1170,7 +1219,7 @@
             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;
 
@@ -1355,8 +1404,8 @@
 
         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 start = moment(this.container.find('input[name="daterangepicker_start"]').val(), this.locale.format).utcOffset(this.timeZone);
-            var end = moment(this.container.find('input[name="daterangepicker_end"]').val(), this.locale.format);
+            var end = moment(this.container.find('input[name="daterangepicker_end"]').val(), this.locale.format).utcOffset(this.timeZone);
 
             if (start.isValid() && end.isValid()) {
 
@@ -1381,7 +1430,7 @@
             }
         },
 
-        controlChanged: function() {
+        elementChanged: function() {
             if (!this.element.is('input')) return;
             if (!this.element.val().length) return;
 
@@ -1411,6 +1460,16 @@
             }
         },
 
+        updateElement: function() {
+            if (this.element.is('input') && !this.singleDatePicker && this.autoUpdateInput) {
+                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.autoUpdateInput) {
+                this.element.val(this.startDate.format(this.locale.format));
+                this.element.trigger('change');
+            }
+        },
+
         remove: function() {
             this.container.remove();
             this.element.off('.daterangepicker');
@@ -1429,4 +1488,4 @@
         return this;
     };
 
-}));
+}));

public/js/firefly.js

@@ -1,36 +1,46 @@
-/* globals token, start, end, dateRangeURL, everything, firstDate, moment, currentMonthName, $, previousMonthName, nextMonthName, applyLabel, cancelLabel, toLabel, customRangeLabel, fromLabel, */
+/* globals token, dateRangeConfig, $, */
 $(function () {
     "use strict";
     $('.currencySelect').click(currencySelect);
 
     var ranges = {};
-    ranges[currentMonthName] = [moment().startOf('month'), moment().endOf('month')];
+    // range for the current month:
-    ranges[previousMonthName] = [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')];
+    ranges[dateRangeConfig.currentMonth] = [moment().startOf('month'), moment().endOf('month')];
-    ranges[nextMonthName] = [moment().add(1, 'month').startOf('month'), moment().add(1, 'month').endOf('month')];
+
-    ranges[everything] = [firstDate, moment()];
+    // range for the previous month:
-    $('#daterange').daterangepicker(
+    ranges[dateRangeConfig.previousMonth] = [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')];
+
+    // range for the next month:
+    ranges[dateRangeConfig.nextMonth] = [moment().add(1, 'month').startOf('month'), moment().add(1, 'month').endOf('month')];
+
+    // range for everything:
+    ranges[dateRangeConfig.everything] = [dateRangeConfig.firstDate, moment()];
+
+
+    // build the data range:
+    $('#daterange').text(dateRangeConfig.linkTitle).daterangepicker(
         {
             ranges: ranges,
             opens: 'left',
             locale: {
-                applyLabel: applyLabel,
+                applyLabel: dateRangeConfig.applyLabel,
-                cancelLabel: cancelLabel,
+                cancelLabel: dateRangeConfig.cancelLabel,
-                fromLabel: fromLabel,
+                fromLabel: dateRangeConfig.fromLabel,
-                toLabel: toLabel,
+                toLabel: dateRangeConfig.toLabel,
                 weekLabel: 'W',
-                customRangeLabel: customRangeLabel,
+                customRangeLabel: dateRangeConfig.customRangeLabel,
                 daysOfWeek: moment.weekdaysMin(),
                 monthNames: moment.monthsShort(),
                 firstDay: moment.localeData()._week.dow
             },
-            format: 'DD-MM-YYYY',
+            format: 'YYYY-MM-DD',
-            startDate: start,
+            startDate: dateRangeConfig.startDate,
-            endDate: end
+            endDate: dateRangeConfig.endDate
         },
         function (start, end, label) {
 
             // send post.
-            $.post(dateRangeURL, {
+            $.post(dateRangeConfig.URL, {
                 start: start.format('YYYY-MM-DD'),
                 end: end.format('YYYY-MM-DD'),
                 label: label,

resources/twig/layout/default.twig

@@ -161,28 +161,30 @@
 <script src="js/bootstrap-tour.min.js" type="text/javascript"></script>
 
 <script type="text/javascript">
-    var start = "{{Session.get('start').format('d-m-Y')}}";
+
-    var end = "{{Session.get('end').format('d-m-Y')}}";
+    // date range picker configuration:
-    var titleString = "{{Session.get('start').formatLocalized(monthAndDayFormat)}} - {{Session.get('end').formatLocalized(monthAndDayFormat)}}";
+    var dateRangeConfig = {
-    var dateRangeURL = "{{route('daterange')}}";
+        startDate: moment("{{Session.get('start').format('Y-m-d')}}"),
+        endDate: moment("{{Session.get('end').format('Y-m-d')}}"),
+        linkTitle: "{{Session.get('start').formatLocalized(monthAndDayFormat)}} - {{Session.get('end').formatLocalized(monthAndDayFormat)}}",
+        URL: "{{route('daterange')}}",
+        firstDate: moment("{{Session.get('first').format('Y-m-d')}}"),
+        currentMonth: "{{ currentMonthName }}",
+        previousMonth: "{{ previousMonthName }}",
+        nextMonth: "{{ nextMonthName }}",
+        everything: '{{ 'everything'|_ }}',
+        customRangeLabel: '{{ 'customRange'|_ }}',
+        applyLabel: '{{ 'apply'|_ }}',
+        cancelLabel: '{{ 'cancel'|_ }}',
+        fromLabel: '{{ 'from'|_ }}',
+        toLabel: '{{ 'to'|_ }}'
+    };
+
     var token = "{{csrf_token()}}";
-    var firstDate = moment("{{Session.get('first').format('Y-m-d')}}");
-    var currentMonthName = "{{ currentMonthName }}";
-    var previousMonthName = "{{ previousMonthName }}";
     var language = "{{ language }}";
-
-    // translations:
-    var everything = '{{ 'everything'|_ }}';
-    var customRangeLabel = '{{ 'customRange'|_ }}';
-    var applyLabel = '{{ 'apply'|_ }}';
-    var cancelLabel = '{{ 'cancel'|_ }}';
-    var fromLabel = '{{ 'from'|_ }}';
-    var toLabel = '{{ 'to'|_ }}';
-
-    var nextMonthName = "{{ nextMonthName }}";
     var currencyCode = '{{getCurrencyCode() }}';
     var currencySymbol = '{{getCurrencySymbol()|raw }}';
-    $('#daterange').text(titleString);
+
 </script>
 
 <script type="text/javascript" src="js/firefly.js"></script>
@@ -190,7 +192,7 @@
 {% block scripts %}{% endblock %}
 
 {% if env('ANALYTICS_ID','') != '' %}
-<script>
+    <script>
         // send pageview
         (function (i, s, o, g, r, a, m) {
             i['GoogleAnalyticsObject'] = r;
@@ -208,14 +210,14 @@
 
         // send an event if relevant:
         {% if Session.has('gaEventCategory') and Session.has('gaEventAction') and not Session.has('gaEventLabel') %}
-            ga('send', 'event', '{{Session.get('gaEventCategory')}}', '{{Session.get('gaEventAction')}}');
+        ga('send', 'event', '{{Session.get('gaEventCategory')}}', '{{Session.get('gaEventAction')}}');
         {% endif %}
 
         // send event if relevant:
         {% if Session.has('gaEventCategory') and Session.has('gaEventAction') and Session.has('gaEventLabel') %}
-            ga('send', 'event', '{{Session.get('gaEventCategory')}}', '{{Session.get('gaEventAction')}}', '{{ Session.get('gaEventLabel') }}');
+        ga('send', 'event', '{{Session.get('gaEventCategory')}}', '{{Session.get('gaEventAction')}}', '{{ Session.get('gaEventLabel') }}');
         {% endif %}
-</script>
+    </script>
 {% endif %}
 
 </body>