Date selected through datepicker shwing one less day when rendered in htl | Community
Skip to main content
N
nikita24tailor
Level 4
June 22, 2023

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

  • June 22, 2023
  • 2 replies
  • 2050 views

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: 
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity Advisor
Community Advisor
June 22, 2023

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/ 

Aanchal Sikka
    Tanika02
    Tanika02
    Level 7
    June 22, 2023

    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 😊

      N
      nikita24tailorAuthor
      Level 4
      June 22, 2023

      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
        Tanika02
        Level 7
        June 22, 2023

        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

         

          Terms & ConditionsAccessibility statement

          Loading footer...