Human Readable Dates in 11ty

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.