How to get date and month using date picker in AEM using HTL. | Community
Skip to main content
A
Anilkumar9
Level 3
October 18, 2024
Solved

How to get date and month using date picker in AEM using HTL.

  • October 18, 2024
  • 3 replies
  • 1293 views

I have a requirement to get the date and month from the datepicker, this is the default format "2024-10-21T00:00:00.000+05:30" in AEM but I want date(00) and month(may). so to get this I have a method calenderEvent.

@Getter
@ValueMapValue
Calendar cardEventDate;

 <p>${cardObj.cardEventDate @ format='MMMM'}</p> htl code, below is the value i'm getting

java.util.GregorianCalendar[time=1729449000000,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+05:30",offset=19800000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2024,MONTH=9,WEEK_OF_YEAR=43,WEEK_OF_MONTH=4,DAY_OF_MONTH=21,DAY_OF_YEAR=295,DAY_OF_WEEK=2,DAY_OF_WEEK_IN_MONTH=3,AM_PM=0,HOUR=0,HOUR_OF_DAY=0,MINUTE=0,SECOND=0,MILLISECOND=0,ZONE_OFFSET=19800000,DST_OFFSET=0]

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by EstebanBustamante

Hi, 

You are using wrong the "format" property from HTL, you should use something like this instead:

${'dd MMM' @ format=cardObj.cardEventDate} <!--/* Below worked fine for me. Outputs: 04 Oct */--> ${'dd MMM' @ format=properties.jcr:lastModified}

 Here is the reference for more formats: https://github.com/adobe/htl-spec/blob/1.3/SPECIFICATION.md#1222-dates

 

Hope this helps

3 replies

SureshDhulipudi
Community Advisor
SureshDhulipudiCommunity Advisor
Community Advisor
October 18, 2024

@ValueMapValue
@14766979
private Calendar cardEventDate;

 

== you have to write a method to format date ==

For Date:

public String getFormattedDate() {
if (cardEventDate != null) {
SimpleDateFormat dateFormat = new SimpleDateFormat("dd");
return dateFormat.format(cardEventDate.getTime());
}
return "";
}

 

For Month:

 

 

public String getFormattedMonth() {
if (cardEventDate != null) {
SimpleDateFormat monthFormat = new SimpleDateFormat("MMMM");
return monthFormat.format(cardEventDate.getTime());
}
return "";
}

 

==

<div data-sly-use.yourModel="youModel">
<p>Date: ${yourModel.formattedDate}</p>
<p>Month: ${yourModel.formattedMonth}</p>
</div>

    Rohan_Garg
    Community Advisor
    Rohan_GargCommunity Advisor
    Community Advisor
    October 18, 2024

    Hey @anilkumar9,

     

    Please try the below once - 

    <sly data-sly-use.htl="com.aem.models.HTLSightlySlingModal"></sly>
    <div>${'yyyy-MM-dd HH:mm' @format=htl.publishDate , timezone='UTC'}</div>
    <div>${'EEEE, d MMM y' @format=htl.publishDate , timezone='UTC', locale='en'}</div>

    Source - AEM Sightly — HTL Deep Dive

     

    Hope this can help!

    Rohan Garg

     

      EstebanBustamante
      Community Advisor and Adobe Champion
      EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
      Community Advisor and Adobe Champion
      October 18, 2024

      Hi, 

      You are using wrong the "format" property from HTL, you should use something like this instead:

      ${'dd MMM' @ format=cardObj.cardEventDate} <!--/* Below worked fine for me. Outputs: 04 Oct */--> ${'dd MMM' @ format=properties.jcr:lastModified}

       Here is the reference for more formats: https://github.com/adobe/htl-spec/blob/1.3/SPECIFICATION.md#1222-dates

       

      Hope this helps

      Esteban Bustamante
        A
        Anilkumar9Author
        Level 3
        October 18, 2024

        @estebanbustamante  Thanks! its working 

         <p>${'MMMM' @ format=cardObj.cardEventDate}</p>
        <p>${'dd' @ format=cardObj.cardEventDate}</p>  
        these are the two lines I have written to achive the above format
          Terms & ConditionsAccessibility statement

          Loading footer...