ENGCOM-7459: Don't load datepicker module until it is actually needed #27860

Author: slavvka

app/code/Magento/Theme/view/frontend/templates/js/calendar.phtml

@@ -14,7 +14,6 @@
 <script>
 require([
     'jquery',
-    'jquery-ui-modules/datepicker'
 ], function($){
 
 //<![CDATA[
@@ -34,7 +33,7 @@ require([
             timeText: "<?= $block->escapeJs(__('Time')) ?>",
             hourText: "<?= $block->escapeJs(__('Hour')) ?>",
             minuteText: "<?= $block->escapeJs(__('Minute')) ?>",
-            dateFormat: $.datepicker.RFC_2822,
+            dateFormat: "D, d M yy", // $.datepicker.RFC_2822
             showOn: "button",
             showAnim: "",
             changeMonth: true,

app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/datepicker.js

@@ -7,11 +7,8 @@ define([
     'ko',
     'underscore',
     'jquery',
-    'mage/translate',
-    'mage/calendar',
-    'moment',
-    'mageUtils'
-], function (ko, _, $, $t, calendar, moment, utils) {
+    'mage/translate'
+], function (ko, _, $, $t) {
     'use strict';
 
     var defaults = {
@@ -46,10 +43,12 @@ define([
                 observable = config;
             }
 
-            $(el).calendar(options);
+            require(['mage/calendar'], function () {
+                $(el).calendar(options);
 
-            ko.utils.registerEventHandler(el, 'change', function () {
-                observable(this.value);
+                ko.utils.registerEventHandler(el, 'change', function () {
+                    observable(this.value);
+                });
             });
         },
 
@@ -62,6 +61,7 @@ define([
          */
         update: function (element, valueAccessor) {
             var config = valueAccessor(),
+                $element = $(element),
                 observable,
                 options = {},
                 newVal;
@@ -75,26 +75,21 @@ define([
                 observable = config;
             }
 
-            if (_.isEmpty(observable())) {
-                if ($(element).datepicker('getDate')) {
-                    $(element).datepicker('setDate', null);
-                    $(element).blur();
+            require(['moment', 'mage/utils/misc', 'mage/calendar'], function (moment, utils) {
+                if (_.isEmpty(observable())) {
+                    newVal = null;
+                } else {
+                    newVal = moment(
+                        observable(),
+                        utils.convertToMomentFormat(
+                            options.dateFormat + (options.showsTime ? ' ' + options.timeFormat : '')
+                        )
+                    ).toDate();
                 }
-            } else {
-                newVal = moment(
-                    observable(),
-                    utils.convertToMomentFormat(
-                        options.dateFormat + (options.showsTime ? ' ' + options.timeFormat : '')
-                    )
-                ).toDate();
 
-                if ($(element).datepicker('getDate') == null ||
-                    newVal.valueOf() !== $(element).datepicker('getDate').valueOf()
-                ) {
-                    $(element).datepicker('setDate', newVal);
-                    $(element).blur();
-                }
-            }
+                $element.datepicker('setDate', newVal);
+                $element.blur();
+            });
         }
     };
 });

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/lib/ko/bind/datepicker.test.js

@@ -8,6 +8,7 @@ define([
     'jquery',
     'moment',
     'mageUtils',
+    'mage/calendar',
     'Magento_Ui/js/lib/knockout/bindings/datepicker'
 ], function (ko, $, moment, utils) {
     'use strict';
@@ -18,6 +19,7 @@ define([
             config;
 
         beforeEach(function () {
+            jasmine.clock().install();
             element = $('<input />');
             observable = ko.observable();
 
@@ -38,6 +40,7 @@ define([
         });
 
         afterEach(function () {
+            jasmine.clock().uninstall();
             element.remove();
         });
 
@@ -62,13 +65,17 @@ define([
             expectedDate = moment(date, utils.convertToMomentFormat(inputFormat)).toDate();
             observable(date);
 
+            jasmine.clock().tick(100);
+
             expect(expectedDate.valueOf()).toEqual(element.datepicker('getDate').valueOf());
         });
 
         it('clear picked date\'s value after clear observable value', function () {
             element.datepicker('setTimezoneDate').blur().trigger('change');
             observable('');
 
+            jasmine.clock().tick(100);
+
             expect(null).toEqual(element.datepicker('getDate'));
         });
     });