Easy Date Formatting With Liquid

Photo by Icons8 Team on Unsplash

Easy Date Formatting With Liquid

Personalizing your messages with Liquid can increase conversions and build stronger customer loyalty. Including specific dates in your emails can be a powerful way to connect with customers — celebrating a milestone, reminding them of renewal dates, alerting them when they take certain actions in your app, and more. With Liquid, it’s easy to transform and display dates to add that personal touch.

Using dates to personalize messages

Imagine you’re sending a birthday discount to a customer. You could say, “Happy birthday! Here’s a discount code.”

But you could easily go one step further and say: “We want to help you celebrate your birthday on March 9. Here’s a discount code valid March 9-16. Wishing you a wonderful birthday week!”

Both messages pull the data about your customer’s date of birth, but the second example uses Liquid to insert the specific date — and, importantly, formats it to match your brand style and customer needs. For instance, you’d want to display “March 9” for U.S. customers and “9 March” for those in the U.K.

To put this into practice, you first need to understand how computers count time using timestamps.

Timestamps: how computers mark time

Dates in computer-based systems are typically stored as timestamps. To the human eye, they look like a meaningless string of numbers:

Timestamp

321436800

Human-readable

Sunday, March 9, 1980 at 8:00 a.m., Coordinated Universal Time

The timestamp above is in UNIX format which identifies dates by counting the number of seconds since January 1, 1970 at 12:00 a.m. Coordinated Universal Time (UTC).

UTC allows computers to all speak the same language when referring to dates. To determine the local time in various time zones across the world, we use a positive or negative offset of UTC. When New York City, for example, is on Eastern Standard Time, or UTC-5:00, it’s five hours earlier than UTC. Similarly, when Tokyo is on Japan Standard Time, or UTC+9:00, it’s nine hours later than UTC.

Epoch Converter is a great tool to see all this in action and convert timestamps into human-friendly date and hours. I use it all the time! (It also explains the difference between UNIX time and the UNIX epoch, if you’re curious.)

Converting timestamps into human-readable dates

To transform timestamps into dates that make sense for readers, you’ll use a Liquid date filter. There are countless options for how Liquid can display dates; here are some examples:

Your input

Output

{{ customer.date_of_birth }}

321436800

{{ customer.date_of_birth | date: “%D” }}

03/09/80

The top row above shows the Liquid code for pulling in the customer’s date of birth attribute, which is a timestamp. In the second row, we’ve applied a filter: that’s the code after the pipe character. In this case, we used an argument that displays the date in MM/DD/YY format.

There are many possible specifiers you can use to display dates, and you can combine them in countless ways — whatever elements you want, in any order. For example, say you want to display the same date above in the DD/MM/YY format. Here, we’ve used three arguments and added slashes between each element:

Your input

Output

{{ customer.date_of_birth }}

321436800

{{ customer.date_of_birth | date: “%d/%m/%y” }}

09/03/80

Because the timestamp is a quantity of seconds, it contains all the data you need to display times, too.

Formatting dates and times in Liquid

There are dozens of specifiers for formatting dates in Liquid. Here’s a cheat sheet of the ones I see most often.

Dates

Format

Output

Liquid date filter arguments

MM/DD/YY

03/09/22

%D

DD/MM/YYYY

09/03/22

%d/%m/%y

Day abbreviation., MM/YY

Wed., 03/09

%a., %m/%d

Day, Month, DD

Wednesday, March 9

%A, %B %e

Times

Format

Output

Liquid date filter arguments

12-hour time (HH:MM)

8:01 pm

%I:%M %P

24-hour time (HH:MM)

20:01

%R

12-hour time (HH:MM) with am/pm and time zone abbreviation

8:01 pm PST

%I:%M %P %Z

Date + time

Format

Output

Liquid date filter arguments

Full date/time

Thu Mar 09 20:01:00 2022

%c

Day, Month, DD at 12-hour time (HH:MM) with am/pm and time zone abbreviation

Wed., 3/09 at 8:01 pm PST

%a., %-m/%d at %I:%M %P %Z

As you can see above, some specifiers return a value with multiple elements (like %D for the full date in MM/DD/YY format), which is a handy shortcut. Other specifiers just display a single element; you can combine those to display the elements you want and add punctuation and text between them.

Here’s another cheat sheet of common specifiers you can combine for displaying dates in different ways.

Format

Output

Liquid date filter arguments

Day

Full name

Thursday

%A

Shortened name

Thu

%a

Number with leading 0

09

%d

Number without leading 0

9

%e

Month

Full name

March

%B

Shortened name

Mar

%b

Number with leading 0

03

%m

Number without leading 0

3

%-m

Year

Full year

2022

%Y

Shortened year

22

%y

A great way to explore how this works is to play with the Strftime.net tool; clicking the various date and time elements will show you the correct code and what the output looks like.