fixed issue edit pattern not applied

after picking from fixed calendar typed date not updating
adobe · Jan 9, 2024 · 4f4a747 · 4f4a747
1 parent b85daf1
commit 4f4a747
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 10 deletions.
diff --git a/...pps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerview.js b/...pps/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerview.js
@@ -16,7 +16,7 @@
 (function() {
 
     "use strict";
-    class DatePicker extends FormView.FormFieldBase {
+    class DatePicker extends FormView.FormDatePicker {
 
         static NS = FormView.Constants.NS;
         static IS = "adaptiveFormDatePicker";
@@ -60,10 +60,11 @@
         }
 
         updateValue(value) {
-            if (this.widgetObject) {
+            if (value.trim() != '' && this.widgetObject) {
                 if (this.isActive()) {
                     this.widgetObject.setValue(value);
                 } else {
+                    this._model.value = this.widgetObject.getValue();
                     this.widgetObject.setDisplayValue(value);
                 }
             } else {
@@ -78,18 +79,20 @@
                     this.widgetObject = new DatePickerWidget(this, this.getWidget(), model);
                 }
                 if (this.widgetObject.getValue() !== '') {
-                    this._model.value = this.widgetObject.getValue();
+                    super.updateFormattedDate(this.widgetObject.getValue());
                 }
                 this.widgetObject.addEventListener('blur', (e) => {
-                    this._model.value = this.widgetObject.getValue();
+                    const {target:{value}} = e;
+                    super.updateFormattedDate(value);
 
                     //setDisplayValue is required for cases where value remains same while focussing in and out.
-                    this.widgetObject.setDisplayValue(this._model.value);
+                    this.widgetObject.setDisplayValue(value);
 
                     this.setInactive();
                 }, this.getWidget());
                 this.widgetObject.addEventListener('focus', (e) => {
-                    this.widgetObject.setValue(e.target.value);
+                    const value = this._model.value;
+                    this.widgetObject.setValue(value);
                     this.setActive();
                 }, this.getWidget());
             } else {

diff --git a/...s/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js b/...s/core/fd/components/form/datepicker/v1/datepicker/clientlibs/site/js/datepickerwidget.js
@@ -1164,7 +1164,8 @@ if (typeof window.DatePickerWidget === 'undefined') {
         if (!this.#isEditValueOrDisplayValue(value)) {
           this.#curInstance.selectedDate = value;  // prevent edit/display value from getting set in calender
         }
-        this.#curInstance.$field.value = this.#curInstance.editValue() || value;
+        this.#curInstance.$field.value = this.#isEditValueOrDisplayValue(value) ?
+            this.#model.editValue : this.#curInstance.editValue() || value;
       } else {
         this.#widget.value = this.#model.editValue || value;
       }

diff --git a/ui.frontend/src/index.js b/ui.frontend/src/index.js
@@ -16,7 +16,7 @@
 import Utils from "./utils.js";
 import LanguageUtils from "./LanguageUtils.js";
 import {createFormInstance, FileObject, extractFileInfo, Click, Change, Submit, Blur, AddItem, RemoveItem, CustomEvent} from "@aemforms/af-core";
-import {FormField, FormContainer, FormFieldBase, FormPanel, FormTabs, FormFileInput, FormOptionFieldBase, FormCheckBox, FormFileInputWidget} from "./view/index.js";
+import {FormField, FormContainer, FormFieldBase, FormPanel, FormTabs, FormFileInput, FormOptionFieldBase, FormCheckBox, FormFileInputWidget, FormDatePicker} from "./view/index.js";
 import {Constants} from "./constants.js";
 import GuideBridge from "./GuideBridge.js";
 import HTTPAPILayer from "./HTTPAPILayer.js";
@@ -77,4 +77,4 @@ const FileAttachmentUtils = {
  */
 
 
-export {createFormInstance, FormTabs, FormField, FormFieldBase, FormPanel, FormContainer, Constants, Utils, Actions, HTTPAPILayer, FileAttachmentUtils, Formatters, LanguageUtils, FunctionRuntime, FormCheckBox, FormOptionFieldBase, FormFileInput, FormFileInputWidget};
+export {createFormInstance, FormTabs, FormField, FormFieldBase, FormPanel, FormContainer, Constants, Utils, Actions, HTTPAPILayer, FileAttachmentUtils, Formatters, LanguageUtils, FunctionRuntime, FormCheckBox, FormOptionFieldBase, FormFileInput, FormFileInputWidget, FormDatePicker};
diff --git a/ui.frontend/src/view/FormDatePicker.js b/ui.frontend/src/view/FormDatePicker.js
@@ -0,0 +1,52 @@
+/*******************************************************************************
+ * Copyright 2024 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+
+import FormFieldBase from "./FormFieldBase.js";
+import {parse , formatDate} from "@aemforms/af-formatters";
+
+/**
+ * Class representing Date picker.
+ * @extends module:FormView~FormDatePicker
+ */
+class FormDatePicker extends FormFieldBase {
+
+    constructor(params) {
+        super(params);
+    }
+
+    updateFormattedDate(value){
+        this._model.value = this.formatDate(value);
+    }
+
+    formatDate(value) {
+        if(!value || value.trim() === '') {
+            return '';
+        }
+        let editFormat = this._model.editFormat;
+        if(editFormat === 'date|short') {
+            editFormat = 'date|yyyy/mm/dd';
+        }
+        let currDate = parse(value.toString(), this._model.locale, editFormat, null, false);
+        if (currDate && !isNaN(currDate) && value != null) {
+            this.selectedMonth = currDate.getMonth();
+            this.selectedYear = currDate.getFullYear();
+            this.selectedDay = currDate.getDate();
+            return this.selectedYear + "-" + (this.selectedMonth + 1) +"-"+ this.selectedDay + "";
+        } else return value;
+    }
+}
+
+export default FormDatePicker;
diff --git a/ui.frontend/src/view/index.js b/ui.frontend/src/view/index.js
@@ -22,6 +22,7 @@ import FormCheckBox from "./FormCheckBox.js";
 import FormFileInput from "./FormFileInput.js";
 import FormFileInputWidget from "./FormFileInputWidget.js";
 import FormOptionFieldBase from "./FormOptionFieldBase";
+import FormDatePicker from "./FormDatePicker";
 
 
-export {FormField, FormContainer, FormFieldBase, FormPanel, FormTabs, FormCheckBox, FormOptionFieldBase, FormFileInput, FormFileInputWidget }
+export {FormField, FormContainer, FormFieldBase, FormPanel, FormTabs, FormCheckBox, FormOptionFieldBase, FormFileInput, FormFileInputWidget, FormDatePicker }