Formatting Dates and Times

Consistent date and time formatting across your site is a crucial aspect of content presentation. It can directly impact user experience and your brand. While dates and times are fundamental elements of content like events and news articles, the default time format from Terminalfour may not match the precise formatting requirements of your brand guidelines or user needs. 

Whether you need to display times in 12-hour or 24-hour format, include time zones, or adapt the format based on the content's context (such as a brief "3pm" in a listing versus a more detailed "3:00 PM EDT" on a full event page), implementing proper time formatting ensures clarity and consistency for your visitors. By establishing standardized time formatting patterns in your Content layouts, you not only maintain a professional appearance but also help your content editors deliver information in a way that's both accessible and aligned with your organization's communication standards.

Date Format Overview

The dateFormat Helper is used to format dates and times within your Handlebars Layouts.
The {{dateFormat ...}} helper takes the following format.

{{dateFormat date ["format"][format="format"] [locale="locale"] [tz=timeZone|timeZoneId] [time="format"]}}

Attributes

The “format” parameter is one of:

• "full": full date format. For example: Tuesday, June 19, 2012
• "long": long date format. For example: June 19, 2012
• "medium": medium date format. For example: Jun 19, 2012
• "short": short date format. For example: 6/19/12
• "pattern": a DateTimeFormatter pattern.

Otherwise, the default formatter will be used. The format option can be specified as a parameter or hash (a.k.a named parameter).

The “locale” parameter can be use to select a locale, e.g. "de" or "en_GB". It defaults to the system locale.

The “tz” parameter is the time zone to use, e.g. "Europe/Berlin" or "GMT-8:00". It defaults to the system time zone.

The “time” parameter specifies the format of the time part, it can be "full", "long", "medium" or "short". If you do not specify it only the date part will appear in the output string.

• "full": full time format. For example: 9:00:00 AM Coordinated Universal Time
• "long": long date format. For example: 9:00:00 AM UTC
• "medium": medium date format. For example: 9:00:00 AM
• "short": short date format. For example: 9:00 AM

More custom formats

As you can see, the dateFormat Helper allows for a lot of customization in your output format. But you may have requirements that are outside of what’s possible with the default formatting options.

Lower case am/pm (Meridiem)

You can make use of the lower Helper to ensure the AM or PM in the time format is converted to lower case.
For example:

{{lower (dateFormat (dateElement element="Date") "hh:mma")}}

Example output:

9:30am

Remove trailing zeros (:00)

You can make use of the cut Helper to remove the zeros from the end of a time if there are two trailing zeros.
For example:

{{cut (dateFormat (dateElement element="Date") "h:mma") ":00"}}

Example output:

{{!-- Time is not exactly "on the hour" --}}
9:30PM

{{!-- Time _is_ exactly "on the hour" --}}
9PM

Associated Press Time Format (AP Time)

If you’re following the Associated Press Style Guide they advise to:

Use lowercase a.m. and p.m., with periods. Always use figures, with a space between the time and the a.m. or p.m.: “By 6:30 a.m. she was long gone.” If it’s an exact hour, no “:00″ is required.

This needs a little bit of “extra nesting” of the cut and replace Helpers alongside the lower Helper but is possible.
For example:

{{cut (replace (replace (lower (dateFormat (dateElement element="Date") "hh:mm a")) "am" "a.m.") "pm" "p.m.") ":00"}}

Example output:

{{!-- Time is not exactly "on the hour" --}}
9:30 a.m.

{{!-- Time _is_ exactly "on the hour" --}}
9 p.m.