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:format_code}- 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/2024it 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
| Format | Description | Example Value |
|---|---|---|
| d | Day of the month, 2 digits with leading zeros | 25 |
| D | A textual representation of a day, three letters | Mon |
| j | Day of the month without leading zeros | 25 |
| l | (lowercase ‘L’) A full textual representation of the day of the week | Monday |
| N | ISO-8601 numeric representation of the day of the week (1=Monday, 7=Sunday) | 1 |
| S | English ordinal suffix for the day of the month, 2 characters | st, nd, rd, th |
| w | Numeric representation of the day of the week (0=Sunday, 6=Saturday) | 1 |
| z | The day of the year (starting from 0) | 83 |
| W | ISO-8601 week number of year, weeks starting on Monday | 13 |
| F | A full textual representation of a month | March |
| m | Numeric representation of a month, with leading zeros | 03 |
| M | A short textual representation of a month, three letters | Mar |
| n | Numeric representation of a month, without leading zeros | 3 |
| t | Number of days in the given month | 31 |
| L | Whether it’s a leap year (1 if it is a leap year, 0 otherwise) | 1 |
| o | ISO-8601 year number | 2024 |
| Y | A full numeric representation of a year, 4 digits | 2024 |
| y | A two-digit representation of a year | 24 |
| a | Lowercase Ante meridiem and Post meridiem | pm |
| A | Uppercase Ante meridiem and Post meridiem | PM |
| B | Swatch Internet time | 250 |
| g | 12-hour format of an hour without leading zeros | 3 |
| G | 24-hour format ofan hour without leading zeros | 15 |
| h | 12-hour format of an hour with leading zeros | 03 |
| H | 24-hour format of an hour with leading zeros | 15 |
| i | Minutes with leading zeros | 30 |
| s | Seconds, with leading zeros | 45 |
| u | Microseconds | 654321 |
| v | Milliseconds | 654 |
| e | Timezone identifier | America/New_York |
| I | (capital ‘i’) Whether or not the date is in daylight saving time | 0 |
| O | Difference to Greenwich time (GMT) in hours | +0200 |
| P | Difference to GMT with colon between hours and minutes | +02:00 |
| T | Timezone abbreviation | EST |
| Z | Timezone offset in seconds | -18000 |
| c | ISO 8601 date | 2024-03-25T15:30:45+00:00 |
| r | » RFC 2822 formatted date | Mon, 25 Mar 2024 15:30:45 +0000 |
| U | Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) | 1398433845 |
Conclusion
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.
