Change the date format in Alpine Theme

After installing the Alpine Theme on two hosted Micro.Blogs, I was extremely keen to change the date format. That took me ages as I blundered around through different theme files. Eventually though, I mainly got it done.

The original

The Alpine Theme tends to write dates like this: 12:30 PM, JUL 1, as the theme's screenshot shows.

Screenshot shows the date and time format I dislike.

I really dislike that format and want my dates to look like this: 17:16 on 08 March 2023. That's a 24 hour time format followed by two digit date, month written out in full, 4 digit year. Plus changes to punctuation and whatnot.

Screenshot shows my preferred date format.


Ideally I'd go to some Settings screen and enter my choices there. Alas, that choice isn't available.

Where and how to change the theme files

First, if you need to, refer to Custom themes for instructions on creating and setting a Custom Theme.

For the Alpine Theme you need to change the date in 3 files:

  • layouts/list.archivehtml.html
  • layouts/post/single.html
  • layouts/partials/post-item.html

Find the place where it says something like this

<time class=“dt-published” datetime=“{{ .Date.Format ”2006–01–02 15:04:05 –0700“ }}”> <a class=“u-url dates” href=“{{ .Permalink }}”>{{ .Date.Format “Jan 2, 2006” }}</a> </time>

A chunk of code, including the relevant part.

Replace the second date & time with your preferred format.

In my case I changed {{ .Date.Format "Jan 2, 2006" }} to read {{ .Date.Format "15:04 on 02 January 2006" }}. I also added the text "Published on " before the date on one blog where that's fairly relevant. (Since changed to "Published at".)

Screenshot shows heading with preferred date below and the words Published on.

The place where I couldn't change the date format was where my blog displays replies from others to my posts.

Also refer to the June 2019 article on @custom: Change the date format.

Miraz Jordan @Miraz