Posted in: Dynamic Content

Posted on:

Secrets to Tailoring Your ACF Dates with Bricks Builder

When working with dates in Bricks Builder, particularly in conjunction with Advanced Custom Fields (ACF), formatting the output of date fields can significantly enhance the readability and presentation of dates on your website.

In Bricks Builder, this process is streamlined by allowing you to append formatting options directly to the ACF field ID in the template. This tutorial will explain how this works and how adding formatting options after the ACF code formats the output.

Basics of ACF Date Formatting in Bricks Builder

The concept is straightforward at its core: when you use an ACF field that stores dates (like an event date and time), Bricks Builder allows you to specify how this date should be displayed directly in the field reference by appending a format string. This string follows the standard PHP date format options.

The general syntax looks like this:

  • acf_field_name is your ACF date field’s unique identifier (ID).
  • format_code is the pattern you specify for displaying the date, following PHP’s date format characters.

Examples Explained

Let’s look at the examples provided and break down what each formatting code translates to:

Example 1: {acf_event_date_time:m/d/Y}

  • Pattern: m/d/Y
  • Output: 02/01/2024
  • Explanation: This format string tells Bricks Builder to display the date in a month/day/year format using numeric values. Therefore, 02/01/2024 it represents February 1, 2024.

Example 2: {acf_event_date_time:F j, Y}

  • Pattern: F j, Y
  • Output: February 1, 2024
  • Explanation: In this case, the date is formatted with a full textual representation of the month (F), followed by the day of the month without leading zeros (j), and then the full numeric year (Y). The result is a more readable, full-date format.

Example 3: {acf_event_date_time:M j, Y}

  • Pattern: M j, Y
  • Output: Feb 1, 2024
  • Explanation: Similar to the previous example but with a short textual representation of the month (M). It provides a concise yet informative date format.

Adding Time to the Date Format

You’re not limited to formatting dates; you can also include time in your format string for fields containing date and time information.

Example 4: {acf_event_date_time:M j, Y g:ia}

  • Pattern: M j, Y g:ia
  • Output: Feb 1, 2024 10:00 am
  • Explanation: Alongside the concise date format, this pattern includes the time in hours and minutes (g:i) with an ante meridiem and post meridiem indicator (a'). Thegcharacter uses a 12-hour format without leading zeros, andi’ represents minutes with leading zeros.

PHP Date & Time Format Cheat Sheet

FormatDescriptionExample Value
dDay of the month, 2 digits with leading zeros25
DA textual representation of a day, three lettersMon
jDay of the month without leading zeros25
l(lowercase ‘L’) A full textual representation of the day of the weekMonday
NISO-8601 numeric representation of the day of the week (1=Monday, 7=Sunday)1
SEnglish ordinal suffix for the day of the month, 2 charactersst, nd, rd, th
wNumeric representation of the day of the week (0=Sunday, 6=Saturday)1
zThe day of the year (starting from 0)83
WISO-8601 week number of year, weeks starting on Monday13
FA full textual representation of a monthMarch
mNumeric representation of a month, with leading zeros03
MA short textual representation of a month, three lettersMar
nNumeric representation of a month, without leading zeros3
tNumber of days in the given month31
LWhether it’s a leap year (1 if it is a leap year, 0 otherwise)1
oISO-8601 year number2024
YA full numeric representation of a year, 4 digits2024
yA two-digit representation of a year24
aLowercase Ante meridiem and Post meridiempm
AUppercase Ante meridiem and Post meridiemPM
BSwatch Internet time250
g12-hour format of an hour without leading zeros3
G24-hour format ofan hour without leading zeros15
h12-hour format of an hour with leading zeros03
H24-hour format of an hour with leading zeros15
iMinutes with leading zeros30
sSeconds, with leading zeros45
eTimezone identifierAmerica/New_York
I(capital ‘i’) Whether or not the date is in daylight saving time0
ODifference to Greenwich time (GMT) in hours+0200
PDifference to GMT with colon between hours and minutes+02:00
TTimezone abbreviationEST
ZTimezone offset in seconds-18000
cISO 8601 date2024-03-25T15:30:45+00:00
r» RFC 2822 formatted dateMon, 25 Mar 2024 15:30:45 +0000
USeconds since the Unix Epoch (January 1 1970 00:00:00 GMT)1398433845


Adding formatting options after the ACF field ID in Bricks Builder is a powerful feature that allows for significant flexibility in displaying date and time information on your website.

By understanding and utilizing PHP’s date format characters, you can customize the appearance of dates and times to match your site’s design and readability requirements.

This tutorial has broken down the basic structure of these formatting options and provided examples to illustrate how different formats affect the output.

Join The Community

Join over 14,000 WordPress enthusiasts and become part of a vibrant community.