FORMS-13810: Add the field to allow custom message for format in date… (#1158)

* FORMS-13810: Add the field to allow custom message for format in date picker

* FORMS-13810: Test case added

* FORMS-13810: Review comments incorporated.

Author: s1mahanty

it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/datepicker/basic/.content.xml

@@ -2,21 +2,22 @@
 <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:dam="http://www.day.com/dam/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
           jcr:primaryType="dam:Asset">
     <jcr:content
-            jcr:lastModified="{Date}2023-01-20T15:28:03.292+05:30"
+            jcr:lastModified="{Date}2024-04-03T17:09:20.123+05:30"
             jcr:primaryType="dam:AssetContent"
             sling:resourceType="fd/fm/af/render"
             guide="1"
             type="guide">
         <metadata
                 fd:version="2.1"
-                themeRef="/libs/fd/af/themes/canvas"
                 jcr:primaryType="nt:unstructured"
                 allowedRenderFormat="HTML"
                 author="admin"
                 availableInMobileApp="{Boolean}false"
+                dorTemplateChanged="Boolean"
                 dorType="none"
                 formmodel="none"
                 hasCustomThumbnail="{Boolean}false"
+                themeRef="/libs/fd/af/themes/canvas"
                 title="Adaptive Form V2 (IT)"/>
     </jcr:content>
 </jcr:root>

it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/datepicker/basic/.content.xml

@@ -3,7 +3,7 @@
           jcr:primaryType="cq:Page">
     <jcr:content
             cq:deviceGroups="[mobile/groups/responsive]"
-            cq:lastModified="{Date}2024-03-18T15:08:02.397+05:30"
+            cq:lastModified="{Date}2024-04-03T17:09:19.976+05:30"
             cq:lastModifiedBy="admin"
             cq:template="/conf/core-components-examples/settings/wcm/templates/af-blank-v2"
             jcr:language="en"
@@ -17,13 +17,14 @@
                 jcr:lastModifiedBy="admin"
                 jcr:primaryType="nt:unstructured"
                 sling:resourceType="forms-components-examples/components/form/container"
-                themeRef="/libs/fd/af/themes/canvas"
                 clientLibRef="corecomponent.it.customfunction"
+                dorType="none"
                 fieldType="form"
                 schemaType="none"
                 textIsRich="true"
                 thankYouMessage="Thank you for submitting the form."
-                thankYouOption="page">
+                thankYouOption="page"
+                themeRef="/libs/fd/af/themes/canvas">
             <dateinput1
                     jcr:primaryType="nt:unstructured"
                     jcr:title="Date Input 1"
@@ -103,7 +104,7 @@
             <datepicker
                     jcr:created="{Date}2023-08-10T15:45:30.311+05:30"
                     jcr:createdBy="admin"
-                    jcr:lastModified="{Date}2023-08-10T15:47:00.344+05:30"
+                    jcr:lastModified="{Date}2024-04-03T17:07:16.009+05:30"
                     jcr:lastModifiedBy="admin"
                     jcr:primaryType="nt:unstructured"
                     jcr:title="Date Picker with edit and display formats"
@@ -114,6 +115,7 @@
                     editPatternType="d/M/y"
                     enabled="{Boolean}true"
                     fieldType="date-input"
+                    formatMessage="Date format expected is d/M/y"
                     hideTitle="false"
                     name="datepicker7"
                     readOnly="{Boolean}false"

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

@@ -215,6 +215,13 @@
                                                             fieldLabel="Edit Format"
                                                             name="./editFormat">
                                                     </editFormat>
+                                                    <formatMessage
+                                                            jcr:primaryType="nt:unstructured"
+                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
+                                                            fieldDescription="Error message shown when the date format is incorrect."
+                                                            granite:class="cmp-adaptiveform-datepicker__formatmessage"
+                                                            fieldLabel="Format error message"
+                                                            name="./formatMessage"/>
                                                 </items>
                                             </editPatternGroup>
                                         </items>

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

@@ -256,4 +256,16 @@ describe("Form Runtime with Date Picker", () => {
         }
     });
 
+    it.only("Test custom error message when incorrect date format is entered", () => {
+        const [datePicker7, datePicker7FieldView] = Object.entries(formContainer._fields)[6];
+        const incorrectInputs = ["adfasdfa", "29/2/2023", "32/1/2023", "1/32/23", "1-1-2023"];
+        incorrectInputs.forEach(incorrectInput => {
+            cy.get(`#${datePicker7}`).find("input").should('have.attr',"type", "text");
+            cy.get(`#${datePicker7}`).find("input").clear().wait(1000).type(incorrectInput).trigger('input').blur()
+                .then(x => {
+                cy.get(`#${datePicker7}`).find("input").should('have.value', incorrectInput); // Check if the input is the same
+                cy.get(`#${datePicker7}`).find(".cmp-adaptiveform-datepicker__errormessage").should('have.text',"Date format expected is d/M/y")
+            });
+        });
+    });
 })