Don't load datepicker module until it is actually needed

Author: Mateusz Krzeszowiak

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,8 +61,10 @@ define([
          */
         update: function (element, valueAccessor) {
             var config = valueAccessor(),
+                $element = $(element),
                 observable,
                 options = {},
+                oldVal,
                 newVal;
 
             _.extend(options, defaults);
@@ -75,26 +76,30 @@ define([
                 observable = config;
             }
 
-            if (_.isEmpty(observable())) {
-                if ($(element).datepicker('getDate')) {
-                    $(element).datepicker('setDate', null);
-                    $(element).blur();
-                }
-            } else {
-                newVal = moment(
-                    observable(),
-                    utils.convertToMomentFormat(
-                        options.dateFormat + (options.showsTime ? ' ' + options.timeFormat : '')
-                    )
-                ).toDate();
+            require(['moment', 'mage/utils/misc', 'mage/calendar'], function (moment, utils) {
+                oldVal = $element.datepicker('getDate');
 
-                if ($(element).datepicker('getDate') == null ||
-                    newVal.valueOf() !== $(element).datepicker('getDate').valueOf()
-                ) {
-                    $(element).datepicker('setDate', newVal);
-                    $(element).blur();
+                if (_.isEmpty(observable())) {
+                    if (oldVal) {
+                        $element.datepicker('setDate', null);
+                        $element.blur();
+                    }
+                } else {
+                    newVal = moment(
+                        observable(),
+                        utils.convertToMomentFormat(
+                            options.dateFormat + (options.showsTime ? ' ' + options.timeFormat : '')
+                        )
+                    ).toDate();
+    
+                    if (oldVal == null ||
+                        newVal.valueOf() !== oldVal.valueOf()
+                    ) {
+                        $element.datepicker('setDate', newVal);
+                        $element.blur();
+                    }
                 }
-            }
+            });
         }
     };
 });