Date formats in Liquid Templating Engine & Jekyll

The Date is an essential entity for blogs. The blogs are contents arranged in reverse chronological order. If we don’t have a published date, there is no blogging at all.

My blog is a Jekyll powered static website and it use Liquid Templating Engine. I like to use dates in different formats at here. After some readings, I collected a list of date formats usable in Liquid for Jekyll & GitHub pages.

The simple Liquid date tag {{ page.date }} can generate published date like 2014-01-15 00:00:00 +0000. Are you like this published date for our Jekyll blog post?

Now we can try to change our date format to display more concise one. The {{ page.date | date_to_string }} can generate a neat date like 26 Jan 2014.

There are some default built-in Liquid date formats to get date in Jekyll pages. Why can’t try them?

The {{ page.date | date: "%c" }} can output date like Sun Jan 26 00:00:00 2014 and the {{ page.date | date: "%x" }} result will be 01/26/14.

Are you irritated with these examples? I realize that they are enough for certain situations. But if you need more flexibility, we can add some filters and generate new date formats.

Can you try {{ page.date | date: "%B %d, %Y" }}? This will generate date like January 26, 2014.

Even if you need the name of the day with your dates like Sunday - Jan 26, 2014, insert {{ page.date | date: "%A - %b %d, %Y" }}.

What is your opinion about 26-01-2014 and 26/01/2014. The {{ page.date | date: "%d-%m-%Y" }} and {{ page.date | date: "%d/%m/%Y" }} can generate them.

The beginning 0 on date and month annoying me. Have you tried {{ page.date | date: "%B %-d, %Y"}} or {{ page.date | date: "%-d/%-m/%y"}}. The result will be omitting 0 from the beginning like January 26, 2014 and 26/1/14.

Even if you like to use last two digit of year with your date like 1/26/14, date tag {{ page.date | date: "%-m/%-d/%y"}} can solve your problem.

Have you get your favorite date format for your Jekyll blog that use Liquid Template engine? Else combine and replace some elements and try yourself.

Recent Posts

1. Disabling Payment Methods in WooCommerce Based on Conditions
2. How to Update Product Quantity in WooCommerce Using Custom Code
3. Dynamically Generating a Table of Contents in WordPress
4. Direct Checkout in WooCommerce - Add Product to Cart from Checkout Page & Skip Shop, Product, and Cart Pages
5. Understanding the Impact of git reset --hard Command

This article was published on January 15, 2014

Your Questions / Comments

If you found this article interesting, found errors, or just want to discuss about it, please get in touch.