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

[sophiag4811594]

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.

[Kunwar · Accepted solution]

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]

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

}

[Labhishetty]

Vijayalakshmi, Is it possible to store time in EST

[sophiag4811594]

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]

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]

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

[MeenuRajput]

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.

[Vinit_Pillai]

Can you explain your workaround? It would be a great help.