Date selected through datepicker shwing one less day when rendered in htl

[nikita24tailor]

I have added a datepicker field of datetime type in page properties and trying to retrieve that datetime in component through servlet/sling model. I'm using 

formatDate(pageProperties.get("newsPublishedDate", Date.class)) to get the date.

And here is the formatDate function:

private String formatDate(Date date) {
String daySuffix = "th";
int dayOfMonth = Integer.parseInt(new SimpleDateFormat("d").format(date));
if (!(dayOfMonth >= 11 && dayOfMonth <= 13)) {
if (dayOfMonth % 10 == 1) {
daySuffix = "st";
} else if (dayOfMonth % 10 == 2) {
daySuffix = "nd";
} else if (dayOfMonth % 10 == 3) {
daySuffix = "rd";
}
}
SimpleDateFormat sdf = new SimpleDateFormat("d'"+daySuffix+"' MMM yyyy");
return sdf.format(date);
}

This works fine on local but when deployed on cloud server, it starts showing the date in UTC time zone ,i.e., one less day. How can I get the exact date which I'm entering into the dtepicker field. Attaching images for the same: 

[aanchal-sikka]

Hello @nikita24tailor 

The AEM server would not know user's timezone. You would have to use javascript to resolve that information in Browser 

Option-1: Pass the timezone offset to AEM Sling Model.

Option-2: get information from Sling Model. The use JS to adjust time as per current timezone offset

However, if you don't care about time, just the date, please refer to https://blogs.perficient.com/2018/10/18/a-way-to-handle-dates-in-aem/ 

[Tanika02]

Hello @nikita24tailor - 

It seems that the issue you're facing is related to the time zone settings in your cloud server environment. By default, dates and times are stored in UTC format in AEM Cloud Service.

To ensure that the date retrieved from the datetime field reflects the exact value entered, regardless of the server's time zone, you can follow these steps:

1. Store the Date/Time in UTC:

When storing the date and time in the page property, convert it to UTC format. You can use the Calendar class to set the appropriate time zone and retrieve the UTC value. Here's an example of how you can do this:

Calendar calendar = Calendar.getInstance(TimeZone.getTimeZone("UTC"));
calendar.setTime(yourDate);
pageProperties.put("newsPublishedDate", calendar);

2. Adjust the Displayed Date:

In your formatDate method, before formatting the date, you can adjust it to the desired time zone by using the TimeZone class. Here's an example of how you can modify the method:

private String formatDate(Date date) {
    TimeZone timeZone = TimeZone.getTimeZone("Your_Time_Zone");
    Calendar calendar = Calendar.getInstance(timeZone);
    calendar.setTime(date);
    
    // Rest of your code for day suffix and formatting

    SimpleDateFormat sdf = new SimpleDateFormat("d'"+daySuffix+"' MMM yyyy");
    sdf.setTimeZone(timeZone);
    return sdf.format(calendar.getTime());
}

By storing the date in UTC format and adjusting the display to the desired time zone in your code, you should be able to retrieve the exact date entered in the datepicker field without any discrepancies caused by time zone differences between your local environment and the cloud server.

Regards,

Tanika 

[nikita24tailor]

I am doing the same, this issue is resolved but the problem comes while query builder daterange utilisation. This works on UTC time format. So if 30 is displaying on the frontend and UTC is strored 29, then daterange will search for 30 but there in no 30's news is not there so it returns nothing for date 30. How can I use query builder daterange to search date in the format it is stored in CRXDE?

[Tanika02]

Hello @nikita24tailor - 

To use the Query Builder DateRange predicate to search for dates in the format they are stored in CRXDE, you need to ensure that the date values in the query are formatted correctly.

// Create a Calendar instance with the desired date range
Calendar startDate = Calendar.getInstance();
startDate.set(2023, Calendar.JANUARY, 1); // Set the start date
Calendar endDate = Calendar.getInstance();
endDate.set(2023, Calendar.DECEMBER, 31); // Set the end date

// Format the dates in the format stored in CRXDE
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSX");
String formattedStartDate = dateFormat.format(startDate.getTime());
String formattedEndDate = dateFormat.format(endDate.getTime());

// Prepare the query parameters
Map<String, String> predicateParams = new HashMap<>();
predicateParams.put("path", "/content/mywebsite"); // Specify the search path
predicateParams.put("type", "cq:Page"); // Specify the node type
predicateParams.put("daterange.property", "jcr:created"); // Specify the date property to search
predicateParams.put("daterange.lowerBound", formattedStartDate); // Set the lower bound
predicateParams.put("daterange.upperBound", formattedEndDate); // Set the upper bound

// Build the query using the PredicateGroup to combine the predicates
PredicateGroup predicates = PredicateGroup.create(predicateParams);
Query query = queryBuilder.createQuery(predicates, session);

// Execute the query
SearchResult result = query.getResult();

// Process the search result as needed

[nikita24tailor]

Hi Tanika,

Thanks for the solution but again this does not work for the query builder daterange as it works on UTC format not the one that is stored in crxde. Is there a way I can use the daterange to search irrespective of any timezone, i.e., the date which is stored in crxde.