date picker layout issue (#1145)

Co-authored-by: dgurjar <dgurjar@adobe.com>

Author: devgurjar

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

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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:xmp="http://ns.adobe.com/xap/1.0/" xmlns:cq="http://www.day.com/jcr/cq/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
+        cq:conf="\0"
+        jcr:lastModified="{Date}2024-03-26T17:00:31.679+05:30"
+        jcr:primaryType="dam:AssetContent"
+        sling:resourceType="fd/fm/af/render"
+        guide="1"
+        type="guide">
+        <metadata
+            fd:version="2.1"
+            jcr:language="en"
+            jcr:primaryType="nt:unstructured"
+            xmp:CreatorTool="AEM Forms AF Wizard"
+            allowedRenderFormat="HTML"
+            author="admin"
+            availableInMobileApp="{Boolean}false"
+            dorTemplateChanged="Boolean"
+            dorType="none"
+            formmodel="none"
+            themeRef="/libs/fd/af/themes/canvas"
+            title="datepickerlayoutissue"/>
+    </jcr:content>
+</jcr:root>

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

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+    jcr:primaryType="cq:Page">
+    <jcr:content
+        cq:deviceGroups="[/etc/mobile/groups/responsive]"
+        cq:lastModified="{Date}2024-03-26T17:00:31.680+05:30"
+        cq:lastModifiedBy="admin"
+        cq:template="/conf/core-components-it/settings/wcm/templates/af-blank-v2"
+        jcr:language="en"
+        jcr:primaryType="cq:PageContent"
+        jcr:title="datepickerlayoutissue"
+        sling:configRef="/conf/forms/datepickerlayoutissue/"
+        sling:resourceType="forms-components-examples/components/page">
+        <guideContainer
+            fd:version="2.1"
+            jcr:lastModified="{Date}2024-03-20T11:03:06.898+05:30"
+            jcr:lastModifiedBy="admin"
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="forms-components-examples/components/form/container"
+            actionType="fd/dashboard/components/actions/aemworkflowsubmit"
+            attachmentsFolderPath="b.pdf"
+            attachmentsType="FOLDER_PAYLOAD"
+            dataXMLPath="a.xml"
+            dataXMLType="FOLDER_PAYLOAD"
+            dorPath="c.pdf"
+            dorType="none"
+            fieldType="form"
+            schemaType="none"
+            textIsRich="true"
+            thankYouMessage="Thank you for submitting the form."
+            thankYouOption="page"
+            themeRef="/libs/fd/af/themes/canvas"
+            title="datepickerlayoutissue"
+            workflowDorType="FOLDER_PAYLOAD"
+            workflowModel="/var/workflow/models/dam/adddamsize">
+            <datepicker
+                jcr:created="{Date}2024-03-19T15:49:42.923+05:30"
+                jcr:createdBy="admin"
+                jcr:lastModified="{Date}2024-03-19T15:49:51.630+05:30"
+                jcr:lastModifiedBy="admin"
+                jcr:primaryType="nt:unstructured"
+                jcr:title="Date Input"
+                sling:resourceType="forms-components-examples/components/form/datepicker"
+                displayFormat="EEEE, d MMMM, y"
+                displayPatternType="EEEE, d MMMM, y"
+                editFormat="EEEE, d MMMM, y"
+                editPatternType="EEEE, d MMMM, y"
+                enabled="{Boolean}true"
+                fieldType="date-input"
+                hideTitle="false"
+                name="datepicker1710843583321"
+                readOnly="{Boolean}false"
+                textIsRich="[true,true]"
+                unboundFormElement="{Boolean}false"
+                visible="{Boolean}true"/>
+        </guideContainer>
+    </jcr:content>
+</jcr:root>

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

@@ -57,7 +57,7 @@ if (typeof window.DatePickerWidget === 'undefined') {
      */
     #defaultOptions = {
       yearsPerView: 16,
-      width: 433,
+      width: 340,
       viewHeight: 248,
       locale: {
         days: ["S","M","T","W","T","F","S"],
@@ -626,9 +626,8 @@ if (typeof window.DatePickerWidget === 'undefined') {
       var self = this,
           curDate = new Date(this.currentYear, this.currentMonth),
           maxDay = this.#maxDate(this.currentMonth),
-          prevMaxDay = this.#maxDate((this.currentMonth + 12) % 12),
+          prevMaxDay = this.#maxDate((this.currentMonth + 11) % 12),
           day1 = new Date(this.currentYear, this.currentMonth, 1).getDay(),
-          rowsReq = Math.ceil((day1 + maxDay) / 7) + 1,
           data, display;
           var localizedYear = this.#getLocalizedYear(curDate);
 
@@ -637,19 +636,22 @@ if (typeof window.DatePickerWidget === 'undefined') {
             caption: this.#options.locale.months[this.currentMonth] + ", "
                 + this.#convertNumberToLocale(localizedYear),
             header: this.#options.locale.days,
-            numRows: rowsReq,
+            numRows: 7,
             numColumns: 7,
             elementAt: function (row, col) {
               var day = (row - 1) * 7 + col - day1 + 1;
+              var monthVal = self.currentMonth + 1;
               let gridId = "day-" + day;
               display = self.#convertNumberToLocale(day);
               data = day;
               if (day < 1) {
                 display = self.#convertNumberToLocale(prevMaxDay + day);
-                data = -1
+                data = -1;
+                monthVal = self.currentMonth;
               } else if (day > maxDay) {
                 display = self.#convertNumberToLocale(day - maxDay);
                 data = -1;
+                monthVal = self.currentMonth + 2;
               } else {
                 curDate.setDate(day);
                 // check if the currentdate is valid based on max and min valid date
@@ -664,7 +666,7 @@ if (typeof window.DatePickerWidget === 'undefined') {
                 gridId: gridId,
                 display: display,
                 ariaLabel: self.#options.editValue(
-                    self.currentYear + "-" + self.#pad2(self.currentMonth + 1)
+                    self.currentYear + "-" + self.#pad2(monthVal)
                     + "-" + self.#pad2(display))
               };
             }
@@ -857,20 +859,6 @@ if (typeof window.DatePickerWidget === 'undefined') {
         }
         this.insertRow(r++, row, false, options.elementAt);
       }
-
-      rows = this["$" + this.view.toLowerCase()].querySelectorAll("ul");
-      rows = [...rows].filter((r) => {
-        return !(r.offsetHeight === 0 && r.offsetWidth === 0)
-      });
-      let len = rows.length;
-      while (len > options.numRows) {
-        this["$" + this.view.toLowerCase()].querySelectorAll(
-            "ul")[--len].style.display = "none";
-      }
-      while (options.numRows > len) {
-        this["$" + this.view.toLowerCase()].querySelectorAll(
-            "ul")[len++].style.display = "flex";
-      }
     }
 
     #hotKeysCallBack = this.#hotKeys.bind(this);