Using ordinal indicators with dates in Eleventy

Using ordinal indicators with dates in Eleventy

This post is now archived. LiquidJS provides a tag out the box to handle ordinal dates (Thanks Zach for the heads up!). I'll keep this post available just incase someone finds it useful.

Recently I needed to display a datetime stamp in a human readable form with st, nd, rd and th after the day value 🤔.

Luckily, using 11ty.io as a static site generator with liquid templating makes this very simple with 11ty's custom filters.

Add a custom ordinal filter to your .eleventy.js

// Ordinal date filter
eleventyConfig.addFilter("ordinal", function(date) {
return date + (date > 0 ? ['th', 'st', 'nd', 'rd'][(date > 3 && date < 21) || date % 10 > 3 ? 0 : date % 10] : '');
});

It can then be used on the day value with the rest of the date parsed as you like.

{{ date | date: "%d" | ordinal }} {{ date | date: "%B %Y" }}

This will render:

1st May 2019 

There is probably a much cleaner way to do this but this is the way I'm currently doing it 😄.