Help Center

Help Articles

Customizing Templates

Date Formatting with Liquid Filters

This article is best suited for readers who are already familiar with Paycove's Liquid variables and how to use them. If you are new to this or simply need a refresher, check out this article on template variables and dynamic fields. Liquid is a useful template language that allows you to display dynamic information directly on your quotes or invoices. You do not need to have coding experience to successfully use Liquid, as it is perhaps more simple than it sounds, and you'll be able to copy and paste most of what you need.

Purpose of Formatting

Date formatting is one of the many ways you can customize your quotes and invoices and have them display in a way that works best for you. Paycove's Liquid variables regarding date default to a year-month-day (yyyy-mm-dd) format. It also provides the time in 24-hour format. Based on your needs, you may prefer the date to be displayed in a different order, such as dd-mm-yyyy. Or perhaps you would like to change the separators between digits, abbreviate days, or use a 12-hour time format. This article will cover the essentials as well as commonly used formats.

Locating Liquid Variables List

Log in to Paycove and navigate to the list of Liquid variables. In this example, we'll access this list by editing the Description section of a particular invoice.

liquid variables modal 2

Note: You can also view this list by navigating to Settings > Liquid variables.

Understanding Filters

There are multiple instances of dates being used within the categories here, so you have several to choose from. To provide an example: in the Deal subcategory, scroll down until you see Date invoice created (in localized format) and Date quote created (in localized format).

These are great instances of Liquid variables that use filters. Filters change the output of a Liquid variable, and they are separated from the rest of the variable by a pipe character "|". Filters are useful for changing the format of something you want to display. The filter added to the Liquid variable is indicated here:

dates 3-2

We'll focus on the date a quote was created in localized format for this example, so copy this code:

{{deal.quote_created_at | date: "%d.%m.%y"}}

Then paste it into your desired section.

liquid filter 1

We are going to take a moment to discuss formatted vs. unformatted dates, so we'll put this example aside for now.

Formatted vs. Unformatted Dates

The benefits of formatting dates are clear when viewing an unformatted date (one with no filter) and a formatted date (one with a filter applied) side by side. This is shown below for a quote created on July 14th, 2022. Input and output simply refer to the data the has been entered, and what the data looks in admin view after clicking save. Note how the unformatted version uses a year-month-day layout with dashes "-" and the 24-hour time, and the formatted version uses a day-month-year layout, it uses periods "." as separators, and the year has been shortened to "22." It also no longer shows the time.

Input

dates 6-1

Output

Choosing Your Format

Now let's return to our example. Type a brief description to give your code some context, and then modify the filter by changing separators and/or changing the order of the date. Click Save when you are done.

Input

We've used this format:

{{deal.quote_created_at | date: "%m/%d/%y"}}

Notice how it looks in standard view. The order has been changed to month-day-year, and separators have been changed to forward slashes "/".

Output

You can get rid of parts of the filter entirely, if you'd like. Here is an option that only shows the month and year with a forward slash "/". Note that the quotations are still in place, and the "m" and "y" still have a percentage character "%" next to them:

Input

{{deal.quote_created_at | date: "%m/%y"}}

Output

Here is an option that is quite different, as it uses the character "a" to designate the day of the week, "b" and "d" for the month and numbered day, and "y" for the year, all stylized in a certain way. It shows an abbreviated version of the date, Thu. July 14, 22.:

Input

{{deal.quote_created_at | date: "%a. %b %d, %y"}}

Output

dates 10

Be aware that capitalization is important. If we use this same format but with the "a," "b," and "y" capitalized, it yields different results. The separators have been changed for styling purposes. The date now shows as Thursday, July 14, 2022.

Input

{{deal.quote_created_at | date: "%A, %B %d, %Y"}}

Output

dates 13-1

The time can easily be changed to a 12-hour format. Here, an "I," "M," and "p" have been added next to the date. The "at" and colon ":" have been added for styling. The time will display in hours and minutes and will include AM or PM.

Input

{{deal.quote_created_at | date: "%m/%d/%y at %I:%M %p"}}

Output

dates 12-2

Customizing Time Zone

Here's an example of how you can customize the time zone within your quotes and invoices. The time displays in UTC by default, but you can change that by adding the following code, replacing the details to reflect your region. This example displays Australian Eastern Time:

{{ deal.invoice_created_at | timezone: "Australia/Sydney" | date: "%d/%m/%Y" }} AET

There is truly a huge amount you can do with Liquid filters, depending on how deeply you want to dive into the topic. This article is simply a guide for understanding the basics. To see more formatting possibilities, take a look at this this quick reference. Most of the format codes in this guide will work with Paycove.

For a more in-depth understanding of how date formats work, check out this article.