How to configure AEM Datepicker to select UTC datetime instead of local datetime | Community
Skip to main content
sophiag4811594
sophiag4811594
May 7, 2018
Solved

How to configure AEM Datepicker to select UTC datetime instead of local datetime

  • May 7, 2018
  • 5 replies
  • 14382 views

Hi,

I am using AEM datepicker (granite/ui/components/coral/foundation/form/datepicker) for our Promo component. This is injected into backend java.util.Calendar instance, where we have additional logic for the component. When the date is selected while authoring the page, the datepicker is setting the datetime in local time instead of UTC time. I need the date to be in UTC time. Here are the properties that I have used for datepicker:

jcr:primaryType="nt:unstructured"

sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"

displayedFormat="MMMM DD, YYYY hh:mm a"

displayTimezoneMessage="{Boolean}true"

fieldLabel="On Time"

name="./onTime"

renderReadOnly="{Boolean}true"

type="datetime"

valueFormat="YYYY-MM-DD[T]HH:mm:ss.000Z"/>

At the backend the datepicker value is injected into a java.util.Calendar instance:

/***

     * Promo on time variable.

     */

    @Optional

    @Inject

    private Calendar onTime;

Is there any property that I am missing? How do I get datepicker to set the date in UTC?

Any help or suggestion is greatly appreciated. Thanks!

Regards,

Sophia.

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 Kunwarsaluja

sophia2018 Datepicker formats works in accordance to moment.js display formats (1). For UTC, You can change the valueFormat or displayFormat property to 'YYYY-MM-DD HH:mm Z" and this should do the trick

(1) : http://momentjs.com/docs/#/displaying/

5 replies

K
Adobe Employee
KunwarsalujaAdobe EmployeeAccepted solution
Adobe Employee
May 7, 2018

sophia2018 Datepicker formats works in accordance to moment.js display formats (1). For UTC, You can change the valueFormat or displayFormat property to 'YYYY-MM-DD HH:mm Z" and this should do the trick

(1) : http://momentjs.com/docs/#/displaying/

    Vijayalakshmi_S
    Vijayalakshmi_S
    Level 10
    May 7, 2018

    HI,

    With the existing set up of your datepicker field, In the PostConstruct (init method), onTime.getTime() would get the Date object of the same and further formatting (if desired) can be done with the help of DateFormat(java.util.DateFormat) - DateFormat (Java Platform SE 7 )

    if(onTime!= null) {

    Date dateTimeZone = onTime.getTime(); 

    String formattedDate = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG).format(dateTimeZone);

    }

      L
      Labhishetty
      January 21, 2021
      Vijayalakshmi, Is it possible to store time in EST
      sophiag4811594
      sophiag4811594Author
      May 8, 2018

      Hi Kunwar,

      I tried the above changes and I am still not getting the UTC time for the promo start time. For example, when I give the promo start time as May 07, 2018 12:00 am, the time I get with onTime.getTime() is 1525676400 which is May 07, 2018 7:00 am. This means that the datepicker is aware of my local timezone and is applying the offset based on my local system timezone. I want the promo start time that I get at the backend to be May 07, 2018 12:00 am.  I don't want the datepicker to apply any offset, I just want the UTC time in secs for May 07, 2018 12:00 am.

      Please note that I get the same behavior whether I add the 'valueFormat' property or I don't add it to datepicker.

      Thanks,

      Sophia

        K
        Adobe Employee
        KunwarsalujaAdobe Employee
        Adobe Employee
        May 8, 2018

        If you visit (1) and adjust the value 'YYYY-MM-DD HH:mm Z' as I suggested, I think I get the correct result. Correct me if I am wrong.

        (1) : Documentation | CoralUI

          sophiag4811594
          sophiag4811594Author
          May 10, 2018

          Hi Kunwar,

          Thank you for the above example. As with the example, when I use 'YYYY-MM-DD HH:mm Z' I get the UTC time based on my local timezone, so if the time I specify is '2018-05-07 00:00' my promo start time becomes 2018-05-07 07:00 (May 07th, 2018 7:00 am). I am still seeing the same issue but now we have a workaround to resolve it. Thank you for the prompt reply and support. We really appreciate it!

          Regards,

          Sophia

            M
            MeenuRajput
            Level 3
            January 30, 2024

            Hi @sophiag4811594 Can you share what workaround you implemented for resolving this?
            I tried adding the 'valueFormat' to 'YYYY-MM-DD HH:mm Z' but you're right to mention that it doesn't work as datepicker is still applying the local time zone offset.

             

            Terms & ConditionsAccessibility statement

            Loading footer...