Human Readable Dates in 11ty

This content originally appeared on DEV Community and was authored by Abdullah Alam

11ty does not come with a filter for human-readable dates out of the box. Here’s how to convert dates to a human-readable format:

Install luxon:

npm i luxon

Import it in your eleventy.config.js:

import { DateTime } from "luxon";

Create a filter:

export default async function(eleventyConfig) {
  // other config

  // human readable date filter
  eleventyConfig.addFilter("readableDate", (dateObj) => {
    return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(
      "dd LLL yyyy",
    );
  });
}

Use the filter in your template:

{{ mypost.data.date | readableDate }}

A note about using the date variable

11ty recommends using page.date instead of the item’s data.date. In my project, if I’ve overridden the default date, it wasn’t picking it up. Use whichever one works for you in your project, the filter should work regardless.

This content originally appeared on DEV Community and was authored by Abdullah Alam