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

[Anilkumar9]

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]

[SureshDhulipudi]

@ValueMapValue
@getter
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]

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 · Accepted solution]

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

[Anilkumar9]

@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