Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

sophiag4811594
Level 1
Level 1

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.

1 Accepted Solution
Kunwar
Correct answer by
Employee
Employee

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/

View solution in original post

6 Replies
Kunwar
Correct answer by
Employee
Employee

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/

View solution in original post

Vijayalakshmi_S
Community Advisor
Community Advisor

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

}

sophiag4811594
Level 1
Level 1

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

Kunwar
Employee
Employee

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
Level 1
Level 1

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