DEV Community

Hilton Meyer
Hilton Meyer

Posted on • Originally published at hiltonmeyer.com on

3 1

Dates in 11ty used in templates

Yesterday was looking for a way to add the updated date to my static site, generated by 11ty, at the bottom of each article. I wanted to show the creation date and the last updated. I started will the following in my layout but the date being returned was then out put as "Last updated Thu Sep 19 2019 03:00:00 GMT+0300 (Israel Daylight Time)":

article.njk

---
layout: layouts/base.njk
templateClass: tmpl-article
---
<p class="title">{{ title }}</p>

{{ content | safe }}

Last updated {{ updated }}

So I now needed a way to format the date instead of getting back such an unwieldy string and having something a bit more human readable. To the docs I went and found that there was something on using dates. I saw they were using a Javascript method for correcting the dates .toUTCString(). this got me wondering what other things I could use and if it was simply the Date object. So I added .toString() and it worked. Well it worked in so much as I got back a full string with the date as above which is what .toString() does according to the documentation on MDN. I noticed there was .toDateString(). BINGO!!!

article.njk

---
layout: layouts/base.njk
templateClass: tmpl-article
---
<p class="title">{{ title }}</p>

{{ content | safe }}

<footer>Create on {{ page.date.toDateString() }} - Last updated {{ updated.toDateString() }}</footer>

You may have noticed that I added the page to the date for creation date as this is working and how the 11ty documentation describes to use Page Variable Content

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay