Expand my Community achievements bar.

SOLVED

Datefield date mismatch

Avatar

Level 1

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

M_Manasi_0-1707412128256.png

 

 

What I see in node properties is 

M_Manasi_1-1707412249361.png

 

But the date I see in view as publish mode when I am trying to use it as data attribute looks something like this

M_Manasi_2-1707412456080.png


Currently I am not doing any kind of processing from backend how can I resolve this issue?? I need the date with time zone.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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



View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

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



Avatar

Community Advisor

@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?

Avatar

Community Advisor

@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.

 

Avatar

Administrator

@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.



Kautuk Sahni