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

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

  • October 18, 2024
  • 3 replies
  • 1277 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

EstebanBustamante
EstebanBustamanteAccepted solution
New Participant
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
    New Participant
    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
      Rohan_Garg
      Rohan_Garg
      New Participant
      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

       

        SureshDhulipudi
        SureshDhulipudi
        New Participant
        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>

          Terms & ConditionsAccessibility statement

          Loading footer...