MC-23729: Invalid date when timeOnly defined on datetime UIComponent.

Author: nmalevanec

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

@@ -124,7 +124,7 @@ define([
             var shiftedValue;
 
             if (value) {
-                if (this.options.showsTime) {
+                if (this.options.showsTime && !this.options.timeOnly) {
                     shiftedValue = moment.tz(value, 'UTC').tz(this.storeTimeZone);
                 } else {
                     shiftedValue = moment(value, this.outputDateFormat, true);
@@ -157,7 +157,7 @@ define([
             if (shiftedValue) {
                 momentValue = moment(shiftedValue, this.pickerDateTimeFormat);
 
-                if (this.options.showsTime) {
+                if (this.options.showsTime && !this.options.timeOnly) {
                     formattedValue = moment(momentValue).format(this.timezoneFormat);
                     value = moment.tz(formattedValue, this.storeTimeZone).tz('UTC').toISOString();
                 } else {
@@ -177,10 +177,13 @@ define([
          * with moment.js library.
          */
         prepareDateTimeFormats: function () {
-            this.pickerDateTimeFormat = this.options.dateFormat;
-
-            if (this.options.showsTime) {
-                this.pickerDateTimeFormat += ' ' + this.options.timeFormat;
+            if (this.options.timeOnly) {
+                this.pickerDateTimeFormat = this.options.timeFormat;
+            } else {
+                this.pickerDateTimeFormat = this.options.dateFormat;
+                if (this.options.showsTime) {
+                    this.pickerDateTimeFormat += ' ' + this.options.timeFormat;
+                }
             }
 
             this.pickerDateTimeFormat = utils.convertToMomentFormat(this.pickerDateTimeFormat);
@@ -189,8 +192,12 @@ define([
                 this.outputDateFormat = this.options.dateFormat;
             }
 
-            this.inputDateFormat = utils.convertToMomentFormat(this.inputDateFormat);
-            this.outputDateFormat = utils.convertToMomentFormat(this.outputDateFormat);
+            this.inputDateFormat = this.options.timeOnly ?
+                utils.convertToMomentFormat(this.pickerDefaultTimeFormat) :
+                utils.convertToMomentFormat(this.inputDateFormat);
+            this.outputDateFormat = this.options.timeOnly ?
+                utils.convertToMomentFormat(this.options.timeFormat) :
+                utils.convertToMomentFormat(this.outputDateFormat);
 
             this.validationParams.dateFormat = this.outputDateFormat;
         }

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

@@ -87,8 +87,10 @@ define([
                     ).toDate();
                 }
 
-                $element.datepicker('setDate', newVal);
-                $element.blur();
+                if (!options.timeOnly) {
+                    $element.datepicker('setDate', newVal);
+                    $element.blur();
+                }
             });
         }
     };

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/form/element/date.test.js

@@ -65,5 +65,22 @@ define([
             expect(model.getPreview()).toBe('28-11-2020');
         });
 
+        it('Check date will have correct value with timeOnly config value.', function () {
+            model.options.timeOnly = true;
+            model.options.timeFormat = 'h:mm a';
+            model.prepareDateTimeFormats();
+            model.value('02:43:58');
+            expect(model.getPreview()).toBe('2:43 am');
+
+            model.options.timeFormat = 'HH:mm:ss';
+            model.prepareDateTimeFormats();
+            model.value('02:43:58');
+            expect(model.getPreview()).toBe('02:43:58');
+
+            model.options.timeFormat = 'HH:mm:ss';
+            model.prepareDateTimeFormats();
+            model.value('2:43 am');
+            expect(model.getPreview()).toBe('02:43:00');
+        });
     });
 });