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
Abdullah Alam | Sciencx (2025-07-01T21:12:20+00:00) Human Readable Dates in 11ty. Retrieved from https://www.scien.cx/2025/07/01/human-readable-dates-in-11ty/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.