ACF DatePicker Fields Review

Advanced Custom Fields (ACF) is renowned as one of the top meta field plugins. The Date, DateTime, and Time picker fields are included in the Advanced group fields, enabling editors to select and store date, date and time, or just time data.

While each field type is distinct, they all adhere to the same principles and utilize the same library to create a user interface for date input. Therefore, this article will cover all of them collectively.

As you can observe, the fields utilize the same approach and rely on a single library to provide the popup UI. Let's delve into the key aspects of the date picker to understand their behavior.

The first important aspect to note about the date picker fields is that they consistently save the chosen value in the database in a pre-defined format. Although the fields offer separate settings for display and return formats, the values are stored in a specific format regardless of the user's settings.

This may initially seem confusing, but it's done to simplify querying by the fields and ensure that chosen values are not lost if the format is changed later.

As depicted in the screenshot above, the Date picker field is stored in the Ymd format, the DateTime picker field in the Y-m-d h:i:s format, while the time field is stored in the h:i:s format.

Using this information, we can effectively craft meta-queries using the WP_Query class and even compare dates within the query. For instance, if we have a Custom Post Type (CPT) for Events along with an event date field, we can dynamically query all items whose event date is today or in the next month.

When constructing the query, it's essential to consider the field type to provide the date in the same format that ACF uses for saving.

However, manually mastering queries can be time-consuming. Therefore, we recommend utilizing the Advanced Views plugin, which introduces smart templates with built-in queries and automated template generation.

With this plugin, you can effortlessly query posts and display them with their meta fields. It supports all meta fields created by ACF and several other meta vendors. In the Pro version, you can easily query/filter by meta fields, and the plugin will handle the correct format comparison for you.

Although date and time values primarily consist of numbers, some formats include letters as well. For example, '10 am/pm', or the names of weeks and months vary in presentation across different languages.

Standard date functions in PHP do not cover multilingual support, meaning they can only print date-related pieces in English. However, WordPress has gone further by adding multilingual support for dates with the date_i18n function.

All ACF date picker fields utilize this function under the hood. Therefore, if your website is in another language and the chosen return format expects translatable parts, the get_field function will return it in the appropriate language.

Tip: You can also use the date_i18n function in your own code. For example, when calculating the difference between dates, while we may solve this task using native PHP functions, we should use date_i18n to ensure that the date pieces are printed in the current language.

As mentioned earlier, the Date picker fields offer the ability to define both Display and Return formats. They provide a set of built-in options as well as the flexibility to define a custom format. In the custom option, any pieces supported by the native PHP date functions can be utilized.

Here are the pre-built formats for date, datetime, and time fields, along with examples:

For Date:

• d/m/Y (21/03/2024)
• m/d/Y (03/21/2024)
• F j, Y (March 21, 2024)

For DateTime:

• d/m/Y g:i a (21/03/2024 1:30 pm)
• m/d/Y g:i a (03/21/2024 1:30 pm)
• F j, Y g:i a (March 21, 2024 1:30 pm)
• Y-m-d H:i:s (2024-03-21 13:30:00)

For Time:

• g:i a (1:30 pm)
• H:i:s (13:30:00)

If necessary, you can define separate formats for display to editors and for code return.

In addition to comparisons in database queries, you may also need to compare values in templates. For example, using the previous example, you can highlight events happening this week with a colorful border.

To achieve this, you'll need to convert string dates from the get_field function response to DateTime instances before comparing them. Direct comparison of two strings won't work properly.

To simplify this task, you can utilize the smart templates from the Advanced Views plugin mentioned earlier. The date fields presentation in templates includes the .timestamp property, which allows for easy comparison of dates.

The ACF date picker simplifies the creation of date-related fields by providing Date, DateTime, and Time picker field types.

While each type is designed to operate with its respective date-related sub-category, they all function similarly and utilize the same jQuery library to create the UI for selecting dates.

When working with date picker fields, it's important to remember that they are always stored in the database in predefined formats, regardless of the specific display and return field settings. Utilizing these predefined formats in database comparisons is necessary for effective query execution.

With the Advanced Views plugin, post queries can be easily mastered, and in the Pro version, meta filters can be applied to any ACF fields, including date pickers. The plugin handles format comparisons for us.

Thanks to the date_i18n function from WordPress, employed by ACF, we can ensure that the response from get_field will be translated into the current language. This function can also be used in your theme whenever this feature is required.

The return format settings include a set of predefined formats and allow for customization. It affects the response obtained from the get_field function. It's important to note that the return consists of strings, so if comparison is needed, conversion into DateTime instances must be performed before comparison.

For simplifying display and comparison tasks, the smart templates from the Advanced Views plugin mentioned above come with the built-in '.timestamp' property, which facilitates comparisons in templates.