Jekyll Date Formatting

Episode #24 - May 22, 2016 - 5 minutes

Resources

Subscribe to Jekyll Casts

In this tutorial we’re going to output a date on a Jekyll site in different formats. We’ll create a new page, /date-formatting.html on our Bakery Store site to try out the different options.

To start with we’ll add some basic Front Matter to /date-formatting.html including a date in ISO 8601 format.

---
layout: default
title: Date Formatting
date: 2016-03-23T10:20:00Z
---

Now we can run the date through a filter to get the desired format.

date_to_long_string

{{ page.date | date_to_long_string }}
23 March 2016

date_to_rfc822

{{ page.date | date_to_rfc822 }}
Wed, 23 Mar 2016 23:20:00 +1300

date_to_string

{{ page.date | date_to_string }}
23 Mar 2016

date_to_xmlschema

{{ page.date | date_to_xmlschema }}
2016-03-23T23:20:00+13:00

date

date gives us complete control of the format. We can specify a template of the format we want. For example.

{{ page.date | date: "%m/%d/%Y" }}
03/23/2016

or

{{ page.date | date: "%-d %B %Y"}}
23 March 2016

There’s many placeholders we can use for date formatting.

Placeholder Format Example
%a Abbreviated weekday Sun
%A Full weekday name Sunday
%b Abbreviated month name Jan
%B Full month name January
%c Preferred local date and time representation Fri Jan 29 11:16:09 2016
%d Day of the month, zero-padded 05
%-d Day of the month 5
%D Formats the date 29/01/16
%e Day of the month 3
%F Returns the date in ISO 8601 format 2016-01-29
%H Hour of the day, 24-hour clock 07
%I Hour of the day, 12-hour clock 04
%j Day of the year 017
%k Hour of the day, 24-hour clock 7
%m Month of the year 04
%M Minute of the hour 09
%p Meridian indicator uppercase AM
%P Meridian indicator lowercase pm
%r 12-hour time 01:31:43 PM
%R 24-hour time 18:09
%T 24-hour time with seconds 18:09:13
%s Number of seconds since 1970-01-01 00:00:00 UTC 1452355261
%S Second of the minute 05
%U Week number of the current year, starting with the first Sunday as the first day of the first week 03
%W Week number of the current year, starting with the first Monday as the first day of the first week 09
%w Day of the week. Sunday is 0 4
%x Preferred representation for the date 05/11/15
%X Preferred representation for the time 17:15:31
%y Year without a century 16
%Y Year with a century 2016
%Z Time zone name PST
%% Literal % character %

One notable exclusion from this list getting the ordinal date. For example we couldn’t output “May 23rd” because there’s no placeholder for the “rd”.

A workaround for this is to use Liquid to calculate and output the ordinal.

{% assign day = page.date | date: "%-d"  %}
{% case day %}
  {% when '1' or '21' or '31' %}{{ day }}st
  {% when '2' or '22' %}{{ day }}nd
  {% when '3' or '23' %}{{ day }}rd
  {% else %}{{ day }}th
{% endcase %}
{{ page.date | date: "of %B, %Y" }}
23rd of March, 2016

Resources

Subscribe to Jekyll Casts