I have used a date field in my component where in when I author a value it is getting saved under content properties with +5:30. If I author a date it is getting saved under content node properties properly but when I try to use it in htl I see in view as published the date is different than the authored date.
For an instance - I authored the date as below
What I see in node properties is
But the date I see in view as publish mode when I am trying to use it as data attribute looks something like this
Currently I am not doing any kind of processing from backend how can I resolve this issue?? I need the date with time zone.
Solved! Go to Solution.
Views
Replies
Total Likes
@M_Manasi
The difference you’re seeing is due to time zone conversion. The date value 2024-01-10T00:00:00.000+05:30 is in your local time zone (India Standard Time, which is GMT+5:30). When you fetch this property in your HTL (Sightly), it’s being converted to Coordinated Universal Time (UTC), which is 2024-01-09T18:30:00Z.
You can solve this by formatting the date by using sling model in the component.
Here's a sling model specifically for this use case
HTL Code
<sly data-sly-use.date="${'com.example.DateFormatter' @ date=properties.dateProperty}">${date.formattedDate}</sly>
Model code
@Model(adaptables = Resource.class) public class DateFormatter { @Self private Resource resource; @ValueMapValue @Inject private Date date; public String getFormattedDate() { SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSZ"); sdf.setTimeZone(TimeZone.getTimeZone("Asia/Kolkata")); return sdf.format(date); } }
Please check if it helps you https://blogs.perficient.com/2018/10/18/a-way-to-handle-dates-in-aem/
@M_Manasi
The difference you’re seeing is due to time zone conversion. The date value 2024-01-10T00:00:00.000+05:30 is in your local time zone (India Standard Time, which is GMT+5:30). When you fetch this property in your HTL (Sightly), it’s being converted to Coordinated Universal Time (UTC), which is 2024-01-09T18:30:00Z.
You can solve this by formatting the date by using sling model in the component.
Here's a sling model specifically for this use case
HTL Code
<sly data-sly-use.date="${'com.example.DateFormatter' @ date=properties.dateProperty}">${date.formattedDate}</sly>
Model code
@Model(adaptables = Resource.class) public class DateFormatter { @Self private Resource resource; @ValueMapValue @Inject private Date date; public String getFormattedDate() { SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSZ"); sdf.setTimeZone(TimeZone.getTimeZone("Asia/Kolkata")); return sdf.format(date); } }
@pulkitvashisth wouldn't this be a problem if the authors are based out of multiple geographies ? In the code we are explicitly setting the timezone for a specific geography (India in this case).
This will be a problem if someone tries to author this component from , lets say US.
besides using typehints, is there any other way to handle this scenario?
@M_Manasi you can use typehints to force the data to be saved as a string instead of an actual Date object.
With that you should not get an additional offset that you see now.
@M_Manasi Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies