date picker manual entry format bug

[sreenu539]

Hi,

Issue: When I enter manual date such as 2023-08-25 or 08-23-2020 , it never seems to work / showing some January 20, 2001 as date.

I am using below date picker from granit ui. Authors entering date manually rather than using date picker.

<date
                                        cq:showOnCreate="{Boolean}true"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
                                        displayedFormat="MMMM DD, YYYY"
                                        fieldDescription="Authored date"
                                        fieldLabel="Authoring date"
                                        name="./authoredDate"/>

Any ideas what format I need to enter, if authors were to enter date manually not using date picker. 

AEM 6.5.13 is used at this time.

[Manu_Mathew_]

@sreenu539 It seems since you have specified as 

displayedFormat="MMMM DD, YYYY"

it would get converted to that format, however it should still allow you to enter in those formats.

[ksh_ingole7]

Hi @sreenu539 

Here are some common valueFormats for the /granite/ui/components/coral/foundation/form/datepicker component in AEM:

1. yyyy-MM-dd: This format represents the year, month, and day with dashes as separators. For example, "2023-08-28" represents August 28, 2023.

2. MM/dd/yyyy: This format represents the month, day, and year with slashes as separators. For example, "08/28/2023" represents August 28, 2023.

3. dd/MM/yyyy: This format represents the day, month, and year with slashes as separators. For example, "28/08/2023" represents August 28, 2023.

4. MMM dd, yyyy: This format represents the month as a three-letter abbreviation, followed by the day and year. For example, "Aug 28, 2023" represents August 28, 2023.

5. EEEE, MMM dd, yyyy: This format represents the full weekday name, followed by the month abbreviation, day, and year. For example, "Saturday, Aug 28, 2023" represents August 28, 2023, which falls on a Saturday.

6. yyyy-MM-dd'T'HH:mm:ss.SSSXXX: This format includes both date and time components along with timezone information. For example, "2023-08-28T13:45:30.000Z" represents August 28, 2023, at 13:45:30 UTC.

7. MMM yyyy: This format displays the abbreviated month followed by the year. For example, "Aug 2023" represents August 2023.

8. yyyy: This format represents just the year. For example, "2023" represents the year 2023.

Thanks.

[sreenu539]

you mean to say, above will solve this issue 

Issue: When I enter manual date such as 2023-08-25 or 08-23-2020 , it never seems to work / showing some January 20, 2001 as date.

[Mahedi_Sabuj · Accepted solution]

Hi @sreenu539,

The Granite Datepicker utilizes Moment.JS to format date and time. Moment JS expects the same format that you've specified as the displayedFormat in the dialog.

For instance, if you've set the displayedFormat as MMMM DD, YYYY, Moment JS uses the code snippet moment("2023-08-25", "MMMM DD, YYYY") to convert the entered value, resulting in "January 20, 2023 08:25 AM". You can check the MomentJS example on CodePen.

To ensure accurate conversion of input values, it's important to enter manual date in the displayedFormat such as August 25, 2023.