By default, the default readableDate in Eleventy will output dates like: Dec 03 2022. Let's do better and set this up as the ordinal date.
For most numbers, we end with th:
let ordinalSuffix = "th";
if (day === 1 || day === 21 || day === 31) {
ordinalSuffix = "st";
} else if (day === 2 || day === 22) {
ordinalSuffix = "nd";
} else if (day === 3 || day === 23) {
ordinalSuffix = "rd";
}
Here's the full code for .eleventy.js or your date converter:
function convertDate(dateString) {
const date = new Date(dateString);
const day = date.getDate();
const month = date.getMonth();
const year = date.getFullYear();
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const monthName = monthNames[month];
let ordinalSuffix = "th";
if (day === 1 || day === 21 || day === 31) {
ordinalSuffix = "st";
} else if (day === 2 || day === 22) {
ordinalSuffix = "nd";
} else if (day === 3 || day === 23) {
ordinalSuffix = "rd";
}
return `${monthName} ${day}${ordinalSuffix}, ${year}`;
}
eleventyConfig.addFilter("readableDate", dateObj => {
// Convert the date object to a date string using the convertDate() function
// And make sure you have nd, st, rd, or th after the day
var dateString = convertDate(dateObj);
return dateString;
});
This function takes advantage of the fact that most dates are ordinaled (if that's a word) with 'th'. We just have to add st to 1, 21, and 31... and then nd to 2 and 22, and we can't forget rd tacked onto 3 and 23.
Top comments (0)