Arti­cle updat­ed on April 26, 2017

NOTE: From AEM6.3 you have now native sup­port for Date/Number for­mat­ting: See my blog­post here: http://​blogs​.adobe​.com/​e​x​p​e​r​i​e​n​c​e​d​e​l​i​v​e​r​s​/​u​n​c​a​t​e​g​o​r​i​z​e​d​/​n​e​w​-​h​t​l​-​f​e​a​t​u​r​e​s​-​a​e​m​6​-3/

Now that more and more peo­ple use the HTML Tem­plate Lan­guage (HTL), for­mer­ly known as Sight­ly, an often heard ques­tion is how to do date for­mat­ting in HTL. In this small blog post, I will show you a way to achieve that.

HTL template

In the exam­ple below, I will for­mat the last-mod­i­fied date of the page, dis­play­ing it in a “dd/MM/yyyy” for­mat.

<sly data-sly-use.date="${'com.yourProject.DateFormatter' @ date=currentPage.lastModified,
     format='dd/MM/yyyy'}">${date.value}</sly>

Two para­me­ters are sent from HTL to the Java class: “date” and “for­mat”. In return, the Java class makes the “val­ue” prop­er­ty avail­able for the tem­plate to dis­play the for­mat­ted date.

Sling Model logic

I use Sling Mod­el for this, togeth­er with the Sim­ple­Date­For­mat class:

package com.yourProject;

import java.text.SimpleDateFormat;
import javax.annotation.PostConstruct;
import javax.inject.Inject;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;

@Model(adaptables=SlingHttpServletRequest.class)
public class DateFormatter {

    @Inject
    private Calendar date;

    @Inject
    private String format;

    public String value;

    @PostConstruct
    protected void init() {
        SimpleDateFormat formatter = new SimpleDateFormat(format);
        value = formatter.format(date.getTime());
    }
}

The code in the Java-class is quite sim­ple because “date” and “for­mat” get inject­ed auto­mat­i­cal­ly by the Sling Mod­el Java anno­ta­tions. There­fore the only “real” code you need to write is to call the for­mat() method.

Hope­ful­ly this gives you an idea how to achieve things like for­mat­ting with the HTML Tem­plate Lan­guage.

@heervisscher

Read-on

Oth­er posts on the top­ic:

And here oth­er resources to learn more about it: