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. | Community
Skip to main content
sreenu539
sreenu539
Level 7
August 30, 2023
Solved

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.

  • August 30, 2023
  • 3 replies
  • 1622 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Mahedi_Sabuj

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.

3 replies

Manu_Mathew_
Community Advisor
Manu_Mathew_Community Advisor
Community Advisor
August 31, 2023

@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
    Community Advisor
    ksh_ingole7Community Advisor
    Community Advisor
    August 31, 2023

    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
      sreenu539Author
      Level 7
      August 31, 2023

      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
        Community Advisor
        Mahedi_SabujCommunity AdvisorAccepted solution
        Community Advisor
        August 31, 2023

        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.

        Mahedi Sabuj
          Terms & ConditionsAccessibility statement

          Loading footer...