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

Avatar

Avatar

sophiag4811594

Avatar

sophiag4811594

sophiag4811594

06-05-2018

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Kunwar

Employee

Avatar

Kunwar

Employee

Kunwar
Employee

07-05-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/

Answers (4)

Answers (4)

Avatar

Avatar

sophiag4811594

Avatar

sophiag4811594

sophiag4811594

09-05-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

Avatar

Avatar

Kunwar

Employee

Avatar

Kunwar

Employee

Kunwar
Employee

08-05-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

Avatar

Avatar

sophiag4811594

Avatar

sophiag4811594

sophiag4811594

07-05-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

Avatar

Avatar

Vijayalakshmi_S

MVP

Avatar

Vijayalakshmi_S

MVP

Vijayalakshmi_S
MVP

07-05-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);

}