FORMS-18328 default date localization changes (#1722)

* FORMS-18328 default date localization changes

* FORMS-18328 updating comment message

---------

Co-authored-by: Shivam Agarwal <[email protected]>

Author: 2 people

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/_cq_dialog/.content.xml

@@ -49,10 +49,10 @@
                                         <items jcr:primaryType="nt:unstructured">
                                             <default
                                                     jcr:primaryType="nt:unstructured"
+                                                    wrapperClass="cmp-adaptiveform-datepicker__defaultdate"
                                                     sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                     fieldDescription="Please enter the date in the required format  &quot;yyyy-mm-dd&quot;."
                                                     fieldLabel="Default date"
-                                                    emptyText="YYYY-MM-DD"
                                                     name="./default"/>
                                         </items>
                                     </column>
@@ -80,9 +80,9 @@
                                             <minimum
                                                     jcr:primaryType="nt:unstructured"
                                                     sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
+                                                    wrapperClass="cmp-adaptiveform-datepicker__mindate"
                                                     fieldDescription="Please enter the date in the required format  &quot;yyyy-mm-dd&quot;."
                                                     fieldLabel="Minimum date"
-                                                    emptyText="YYYY-MM-DD"
                                                     name="./minimumDate"
                                                     valueFormat="YYYY-MM-DD[T]HH:mm:ss.000-00:00"/> <!-- Enforce UTC timezone to be timezone agnostic -->
                                             <minimumMessage
@@ -108,9 +108,9 @@
                                             <maximum
                                                     jcr:primaryType="nt:unstructured"
                                                     sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
+                                                    wrapperClass="cmp-adaptiveform-datepicker__maxdate"
                                                     fieldDescription="Please enter the date in the required format  &quot;yyyy-mm-dd&quot;."
                                                     fieldLabel="Maximum date"
-                                                    emptyText="YYYY-MM-DD"
                                                     name="./maximumDate"
                                                     valueFormat="YYYY-MM-DD[T]HH:mm:ss.000-00:00"/> <!-- Enforce UTC timezone to be timezone agnostic -->
                                             <maximumMessage

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

@@ -23,6 +23,9 @@
         DATEPICKER_EDITFORMAT = EDIT_DIALOG + " .cmp-adaptiveform-datepicker__editformat",
         DATEPICKER_LANG = EDIT_DIALOG + " .cmp-adaptiveform-datepicker__lang",
         DATEPICKER_LANGDISPLAYVALUE = EDIT_DIALOG + " .cmp-adaptiveform-datepicker__langdisplayvalue",
+        DATEPICKER_DEFAULTDATE = EDIT_DIALOG + " .cmp-adaptiveform-datepicker__defaultdate",
+        DATEPICKER_MINDATE = EDIT_DIALOG + " .cmp-adaptiveform-datepicker__mindate",
+        DATEPICKER_MAXDATE = EDIT_DIALOG + " .cmp-adaptiveform-datepicker__maxdate",
         Utils = window.CQ.FormsCoreComponents.Utils.v1;
 
 
@@ -47,5 +50,24 @@
         Utils.handlePatternFormat(dialog,DATEPICKER_LANGDISPLAYVALUE,DATEPICKER_LANG);
     }
 
-    Utils.initializeEditDialog(EDIT_DIALOG)(handleDisplayPatternDropDown,handleDisplayFormat,handleEditPatternDropDown,handleEditFormat,handleLang);
+    function handleDatePlaceholders(dialog){
+        var defaultDateInput = dialog.find(DATEPICKER_DEFAULTDATE + " input")[0],
+            minDateInput = dialog.find(DATEPICKER_MINDATE + " coral-datepicker")[0],
+            maxDateInput = dialog.find(DATEPICKER_MAXDATE + " coral-datepicker")[0],
+            defaultDateTooltip = dialog.find(DATEPICKER_DEFAULTDATE + " coral-tooltip")[0],
+            minDateTooltip = dialog.find(DATEPICKER_MINDATE + " coral-tooltip")[0],
+            maxDateTooltip = dialog.find(DATEPICKER_MAXDATE + " coral-tooltip")[0],
+            emptyText = Granite.I18n.get('YYYY-MM-DD', null, 'placeholder text to retain format across locale'),
+            fieldDescription = Granite.I18n.get('Please enter the date in the required format "yyyy-mm-dd".', null, 'placeholder text to retain format across locale');
+
+        defaultDateInput.placeholder = emptyText;
+        defaultDateInput.setAttribute('aria-label', emptyText);
+        minDateInput.placeholder = emptyText;
+        maxDateInput.placeholder = emptyText;
+        defaultDateTooltip.innerHTML = fieldDescription;
+        minDateTooltip.innerHTML = fieldDescription;
+        maxDateTooltip.innerHTML = fieldDescription;
+    }
+
+    Utils.initializeEditDialog(EDIT_DIALOG)(handleDisplayPatternDropDown,handleDisplayFormat,handleEditPatternDropDown,handleEditFormat,handleLang,handleDatePlaceholders);
 })(jQuery);