Using date-fns to Build Cleaner Date Filters in Eleventy

Introduction

Eleventy is a lightweight, flexible static site generator — but it doesn’t include built-in date formatting utilities. If you want readable blog post dates, archive timestamps, or SEO-friendly formats for sitemaps and RSS feeds, you need to create your own date filters in eleventy.config.js.

The popular choice is to use luxon, such as the popular postDate filter on 11ty rocks postDate filter.

In this guide, we’ll look at how to replace luxon with the smaller and more modular date-fns, and build elegant, reusable date filters for your Eleventy project. Date-fns offers a large set of lightweight formatting utilities, has good documentation and can be simpler and more intuitive to use than Luxon.

Why Eleventy Needs Custom Date Filters

Eleventy exposes a post.date value, but it doesn’t apply formatting. That means your template might output something like:

2025-01-06T10:00:00.000Z

Good for machines, bad for humans.

To fix this, you must define custom date filters as part of the eleventy setup. These filters can be used to display:

• Human-readable blog dates
• ISO / RFC timestamps for SEO
• Short dates for archives
• Custom formats for RSS feeds and JSON feeds

Since Eleventy doesn’t provide a default, developers choose their own date libraries — this post describes how to use date-fns.

Use data-fns library to format dates

The date-fns library provides a format JavaScript function for date formatting. The function

The format helper from the date-fns Javascript library can be used to provide different date formatting options.

The function takes a date and desired format string and returns the desired date string.

function format(
  date: string | number | Date,
  formatStr: string,
  options?: FormatOptions
): string

For example to format a date value as Month, Day, Year the following format string would be used MMMM dd, yyyy as follows:

format(new Date(2017, 10, 6), 'MMMM dd, yyyy') // => 'October 6, 2017'
format('2025-01-06T10:00:00.000Z', 'MMMM dd, yyyy') // => 'January, 1, 2025'

Installing date-fns in Your Eleventy Project

Install via npm:

npm install date-fns

That’s all you need — no plugins, no extra configuration.

Creating a Date Filter in eleventy.config.js

Add a reusable date filter:

// import the data-fns format helper
const { format } = require('date-fns'); 

module.exports = function(eleventyConfig) {
    // date filter
    eleventyConfig.addFilter("postDate", (dateObj) => {
        const result = format(dateObj, 'MMM dd, yyyy')
        return result;
    });
}

You can now use it in templates or markdown:

---
title: "Date filter example"
date: 2024-01-01
layout: "base.njk"
---

Here is a date filter example {{ date | postDate }}.

Formatting Blog Post Dates with date-fns

The date-fns format function uses tokens similar to many other date libraries. Here are some helpful formats:

Use whichever that meets your needs.

Note: Eleventy uses the system timezone by default, which is usually fine for static blogs.

Adding Extra Filters for Archives, RSS, and Sitemaps

You can add more shortcuts for the date element in different parts of site, using the date-fns library. Here are some examples:

Human-friendly archive date

eleventyConfig.addFilter("archiveDate", (dateObj) => {
  return format(dateObj, "MM/yyyy");
});

ISO format for JSON feeds

eleventyConfig.addFilter("isoDate", (dateObj) => {
  return dateObj.toISOString();
});

RSS-compatible format

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

eleventyConfig.addFilter("rssDate", (dateObj) => {
  return formatRFC7231(dateObj);
});

Site map format

eleventyConfig.addFilter("siteMapDate", (date) => {
    return format(date, "yyyy-MM-dd"); // ISO 8601 format
});

---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9">
{% for page in collections.all %}
    <url>
        <loc>https://www.prosupervise.com{{ page.url }}</loc>
        <lastmod>{{page.date | siteMapDate}}</lastmod>
        <changefreq>weekly</changefreq>
    </url>
{% endfor %}
</urlset>

Conclusion

For developers building a clean, fast, modern Eleventy blog, date-fns is an ideal choice for formatting dates. It’s lightweight, easy to work with, and integrates naturally into Eleventy’s filter system. It also has good documentation on how to use it.

By setting up a few reusable date filters, you can:

• Improve readability of blog dates, etc
• Make date aspects easier to manage for SEO, sitemap, and RSS elements of your sit
• Keep your date logic organised and easy to maintain

It’s a simple improvement that makes managing dates in your 11ty project easier and more maintainable.