MC-17922: Date in filter area doesn't match with Active filters bar

Author: serhii-balko

app/code/Magento/Ui/view/base/web/js/form/element/date.js

@@ -114,24 +114,28 @@ define([
          * @param {String} value
          */
         onValueChange: function (value) {
-            var dateFormat,
-                shiftedValue;
+            var shiftedValue;
 
             if (value) {
                 if (this.options.showsTime) {
                     shiftedValue = moment.tz(value, 'UTC').tz(this.storeTimeZone);
                 } else {
-                    dateFormat = this.shiftedValue() ? this.outputDateFormat : this.inputDateFormat;
-                    shiftedValue = moment(value, dateFormat);
+                    shiftedValue = moment(value, this.outputDateFormat);
                 }
 
-                shiftedValue = shiftedValue.format(this.pickerDateTimeFormat);
+                if (!shiftedValue.isValid()) {
+                    shiftedValue = moment(value, this.inputDateFormat);
+                }
 
+                shiftedValue = shiftedValue.format(this.pickerDateTimeFormat);
                 if (shiftedValue !== this.shiftedValue()) {
                     this.shiftedValue(shiftedValue);
                 }
+            } else {
+                if (this.shiftedValue()) {
+                    this.shiftedValue('');
+                }
             }
-
         },
 
         /**

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

@@ -35,35 +35,62 @@ define([
         init: function (el, valueAccessor) {
             var config = valueAccessor(),
                 observable,
-                options = {};
-
-            _.extend(options, defaults);
+                options = defaults;
 
             if (typeof config === 'object') {
                 observable = config.storage;
-
                 _.extend(options, config.options);
             } else {
                 observable = config;
             }
 
             $(el).calendar(options);
 
-            observable() && $(el).datepicker(
-                'setDate',
-                moment(
+            ko.utils.registerEventHandler(el, 'change', function () {
+                observable(this.value);
+            });
+        },
+
+        /**
+         * Update calendar widget on element and stores it's value to observable property.
+         * Datepicker binding takes either observable property or object
+         *  { storage: {ko.observable}, options: {Object} }.
+         * @param {HTMLElement} element - Element, that binding is applied to
+         * @param {Function} valueAccessor - Function that returns value, passed to binding
+         */
+        update: function(element, valueAccessor) {
+            var config = valueAccessor(),
+                observable,
+                options = defaults,
+                newVal;
+
+            if (typeof config === 'object') {
+                observable = config.storage;
+                _.extend(options, config.options);
+            } else {
+                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()
-            );
-
-            $(el).blur();
+                ).toDate();
 
-            ko.utils.registerEventHandler(el, 'change', function () {
-                observable(this.value);
-            });
+                if ($(element).datepicker('getDate') == null ||
+                    newVal.valueOf() !== $(element).datepicker('getDate').valueOf()
+                ) {
+                    $(element).datepicker('setDate', newVal);
+                    $(element).blur();
+                }
+            }
         }
     };
 });

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

@@ -53,5 +53,23 @@ define([
 
             expect(todayDate).toEqual(result);
         });
+
+        it('update picked date\'s value after update observable value', function () {
+            var date = '06/21/2019',
+                inputFormat = 'M/d/yy',
+                expectedDate;
+
+            expectedDate = moment(date, utils.convertToMomentFormat(inputFormat)).toDate();
+            observable(date);
+
+            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('');
+
+            expect(null).toEqual(element.datepicker('getDate'));
+        });
     });
 });