MAGETWO-53299: "Go Today" button is not working for dates range component

Author: iivashchenko

app/code/Magento/Backend/view/adminhtml/templates/page/js/calendar.phtml

@@ -51,6 +51,7 @@ require([
             showHour: false,
             showMinute: false,
             serverTimezoneSeconds: <?php echo (int) $block->getStoreTimestamp(); ?>,
+            serverTimezoneOffset: <?php echo (int) $block->getTimezoneOffsetSeconds(); ?>,
             yearRange: '<?php /* @escapeNotVerified */ echo $block->getYearRange() ?>'
         }
     });

dev/tests/js/JsTestDriver/testsuite/mage/calendar/calendar-test.js

@@ -58,6 +58,18 @@ CalendarTest.prototype.testWithServerTimezoneOffset = function() {
     assertEquals(true, currentDate.toString() === calendar.calendar('getTimezoneDate').toString());
     calendar.calendar('destroy');
 };
+CalendarTest.prototype.testWithServerTimezoneShift = function() {
+    /*:DOC += <input type="text" id="calendar" /> */
+    var serverTimezoneOffset = 43200,
+        calendar = $('#calendar').calendar({serverTimezoneOffset: serverTimezoneOffset}),
+        currentDate = new Date();
+
+    setTimeout(function () {
+        currentDate.setTime(currentDate.getTime() + (serverTimezoneOffset + currentDate.getTimezoneOffset() * 60) * 1000);
+        assertEquals(true, currentDate.toString() === calendar.calendar('getTimezoneDate').toString());
+        calendar.calendar('destroy');
+    }, 61000);
+};
 CalendarTest.prototype.testWithoutServerTimezoneOffset = function() {
     /*:DOC += <input type="text" id="calendar" /> */
     var calendar = $('#calendar').calendar(),

lib/web/mage/calendar.js

@@ -21,25 +21,46 @@
 }(function ($) {
     'use strict';
 
-    var calendarBasePrototype;
+    var calendarBasePrototype,
+        datepickerPrototype = $.datepicker.constructor.prototype;
 
     /**
-     * Get date/time according to store settings
-     * @returns {Date}
+     * Extend JQuery date picker prototype with store local time methods
      */
-    function getTimezoneDate() {
-        // Get local time in ms
-        var ms = Date.now(),
-            options = $.calendarConfig ? $.calendarConfig : {};
-
-        // Use store timestamp based on store timezone settings
-        if (typeof options.serverTimezoneSeconds !== 'undefined') {
-            //Adjust milliseconds according to client local timezone offset
-            ms = (options.serverTimezoneSeconds + new Date().getTimezoneOffset() * 60) * 1000;
-        }
+    $.extend(datepickerPrototype, {
 
-        return new Date(ms);
-    }
+        /**
+         * Get date/time according to store settings.
+         * We use serverTimezoneOffset (in seconds) instead of serverTimezoneSeconds
+         * in order to have ability to know actual store time even if page hadn't been reloaded
+         * @returns {Date}
+         */
+        _getTimezoneDate: function () {
+            // local time in ms
+            var ms = Date.now(),
+                options = $.calendarConfig ? $.calendarConfig : {};
+
+            // Adjust milliseconds according to store timezone offset,
+            // mind the GMT zero offset
+            if (typeof options.serverTimezoneOffset !== 'undefined') {
+                // Make UTC time and add store timezone offset in seconds
+                ms += new Date().getTimezoneOffset() * 60 * 1000 + options.serverTimezoneOffset * 1000;
+            } else if (typeof this.options.serverTimezoneSeconds !== 'undefined') {
+                //Set milliseconds according to client local timezone offset
+                ms = (this.options.serverTimezoneSeconds + new Date().getTimezoneOffset() * 60) * 1000;
+            }
+
+            return new Date(ms);
+        },
+
+        /**
+         * Set date/time according to store settings.
+         * @param {String|Object} target - the target input field or division or span
+         */
+        _setTimezoneDateDatepicker: function (target) {
+            this._setDateDatepicker(target, this._getTimezoneDate());
+        }
+    });
 
     $.datepicker.markerClassName = '_has-datepicker';
 
@@ -99,7 +120,7 @@
              * @return {String} html template
              */
             $.datepicker.constructor.prototype._generateHTML = function (inst) {
-                var today = getTimezoneDate(),
+                var today = this._getTimezoneDate(),
                     isRTL = this._get(inst, 'isRTL'),
                     showButtonPanel = this._get(inst, 'showButtonPanel'),
                     hideIfNoPrevNext = this._get(inst, 'hideIfNoPrevNext'),
@@ -339,8 +360,7 @@
          */
         _setCurrentDate: function (element) {
             if (!element.val()) {
-                element[this._picker()]('setDate', getTimezoneDate())
-                    .val('');
+                element[this._picker()]('setTimezoneDate').val('');
             }
         },
 
@@ -523,7 +543,7 @@
         var pickerObject = $(el);
 
         //Set date/time according to timezone offset
-        pickerObject.datepicker('setDate', getTimezoneDate())
+        pickerObject.datepicker('setTimezoneDate')
             // To ensure that user can re-select date field without clicking outside it first.
             .blur();
     };