datepicker timezone issue on view layer fixed (#1168)

* datepicker timezone issue on view layer fixed

datepicker timezone issue on view layer fixed

datepicker timezone issue on view layer fixed

* datepicker fix test case

Author: barshat7

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerview.js

@@ -99,6 +99,12 @@
                     this.widgetObject.setValue(e.target.value);
                     this.setActive();
                 }, this.getWidget());
+                this.widgetObject.addEventListener('input', (e) => {
+                    if( e.target.value === '') {
+                        // clear the value if user manually empties the value in date input box
+                        this._model.value = "";
+                    }
+                }, this.getWidget());
             } else {
                 if (this.widget.value !== '') {
                     this._model.value = this.widget.value;

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js

@@ -1160,6 +1160,9 @@ if (typeof window.DatePickerWidget === 'undefined') {
     setValue(value) {
       let currDate =  new Date(value);
 
+      const timezoneOffset = currDate.getTimezoneOffset();
+      currDate.setMinutes(currDate.getMinutes() + timezoneOffset);
+
       if (!isNaN(currDate) && value != null) {
         //in case the value is directly updated from the field without using calendar widget
         this.selectedMonth = currDate.getMonth();
@@ -1193,6 +1196,9 @@ if (typeof window.DatePickerWidget === 'undefined') {
           case 'focus':
             handler(e);
             break;
+          case 'input':
+            handler(e);
+            break;
 
         }
       });

ui.tests/test-module/specs/datepicker/datepicker.runtime.spec.js

@@ -67,7 +67,16 @@ describe("Form Runtime with Date Picker", () => {
             cy.get('input')
                 .should(passDisabledAttributeCheck, 'disabled');
             cy.get('input').should(passReadOnlyAttributeCheck, 'readonly');
-            cy.get('input').should('have.value', value)
+            cy.get('input').invoke('val').then(inputVal => {
+                const viewDate = new Date(inputVal);
+                const stateDate = new Date(value);
+               if (!isNaN(viewDate) && !isNaN(stateDate)) {
+                   // Default date could be in different format, we need to compare the intrinsic value of the date
+                   expect(viewDate.getTime()).to.equal(stateDate.getTime());
+               } else {
+                   expect(inputVal).to.equal(value)
+               }
+            })
         })
     }
 
@@ -288,4 +297,21 @@ describe("Form Runtime with Date Picker", () => {
             cy.get(`#${datePicker8}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should('have.css', 'display', 'block');
         })
     });
+
+    it("Value selected from calendar widget should match the value set in model", () => {
+        const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
+        let model = datePicker7FieldView.getModel();
+        const date = '2023-08-10';
+        cy.get(`#${datePicker7}`).find("input").clear().type(date).blur().then(x => {
+            expect(model.getState().value).to.equal(date);
+            cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__calendar-icon").should("be.visible").click().then(() => {
+                cy.get("#li-day-3").should("be.visible").click(); // clicking on the 2nd day of the month of October 2023
+                cy.get(`#${datePicker7}`).find("input").blur().should("have.value","Wednesday, 2 August, 2023")
+                .then(() => {
+                    expect(datePicker7FieldView.getModel().getState().value).to.equal('2023-08-02')
+                })
+
+            });
+        })
+    });
 })