Date is adding the timezone from gmt

[LyonMartin]

Good day everyone,
Got a query regards the date.

We have a property name contentDate:

@ValueMapValue(name = "contentDate", injectionStrategy = InjectionStrategy.OPTIONAL)
private String contentDate;  

 with properties like this on the dialog

sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
displayedFormat="MMMM D, YYYY"
name="./contentDate"
type="datetime"

Now, when we tried to modify the date and time of the component like 01/25/2024 00:00, upon loading the component, the date would become 01/24/2024 18:30 or 01/24/2024 16:00 (which I believe based on the timezone), but why is that happening and what would be the best practice to avoid printing the wrong value?
Thanks!

[arunpatidar · Accepted solution]

Hi @LyonMartin 
I think in the dialog values shows based on user's current timezone. You can add belowe property to show the message to the Authors related to timezone conversion. 

displayTimezoneMessage (boolean)

Indicates if a informative message should be displayed regarding timezone prevalence

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

[LyonMartin]

Thanks will check that one out.

[Raja_Reddy]

Hi @LyonMartin 

you can modify the  ContentDate property to store the date in UTC format using the java.util.Date class. 

@ValueMapValue(name = "contentDate", injectionStrategy = InjectionStrategy.OPTIONAL)
@org.apache.sling.api.adapter.annotations.Optional
@org.apache.sling.api.resource.ValueMapValue
@org.apache.sling.models.annotations.Default(values = "")
@org.apache.sling.models.annotations.injectorspecific.Self
private Date contentDate;

public Date getContentDate() {
    return contentDate;
}

public void setContentDate(Date contentDate) {
    this.contentDate = contentDate;
}

Then, in the dialog, you can use the granite/ui/components/coral/foundation/form/datetime component instead of granite/ui/components/coral/foundation/form/datepicker to allow users to select both the date and time.

<sling:include path="datetime" resourceType="granite/ui/components/coral/foundation/form/datetime"
    fieldLabel="Content Date"
    name="./contentDate"
    valueFormat="YYYY-MM-DDTHH:mm:ss.SSSZ"
    displayedFormat="MMMM D, YYYY h:mm A"
    defaultValue=""
    required="{Boolean}true"/>

By using the datetime component and storing the date in UTC format.

[LyonMartin]

Thanks! Will try that one on my end.