Easily handle date-formatting

Out of the box ta11y use date-fns filter to format dates across the template. In this article I'll dive into how you can change the format globally or introduce new unique format filters.

To learn more about formatting dates with date-fns visit the date-fns docs

How dates are formatted as default

By default dates are formatted as December 12th - 2023.

Initialize the filter

First we need to Initialize the filter in our 11ty setup. This is done in the file .eleventy.js.

// In .eleventy.js

const { format } = require("date-fns");

module.exports = function (eleventyConfig) {
    // Date filter
    // -----------------------
    eleventyConfig.addFilter("datefmt", (contentDate) => {
        return format(contentDate, "LLL d'th' - yyyy");
    });
}

Now we can use this filter on all date values in our eleventy-install. Like in this snip of code from the collection of posts:

{%- if post.data.date -%}
        <time> datetime="{{- post.data.date -}}">{{- post.data.date | datefmt -}}</time>
    {%- else -%}
        <time> datetime="{{ page.date }}">{{- page.date | datefmt -}}</time>
    {%- endif -%}
{%- endraw -%}
{%- endhighlight -%}

{%- highlight "html" -%}
{%- raw -%}
    {{- page.date | datefmt -}}

What if you wanted to include the weekday?

So ... let's say you wanted to display the weekday in the formatted date?

Easy enough:

Just jump straight into .eleventy.js and alter this line:

// From this
eleventyConfig.addFilter("datefmt", (contentDate) => {
    return format(contentDate, "LLL d'th' - yyyy");
});

// To this
eleventyConfig.addFilter("datefmt", (contentDate) => {
    return format(contentDate, "eeee, LLL d'th' - yyyy");
});

That is all it takes