Date and Time Picker field for Advanced Custom Fields

screenshot-2

This is an add-on for the Advanced Custom Fields (ACF) WordPress plugin, that allows you to add a Date and Time Picker field type. Works with ACF v3, v4 and v5.

Brought To You By

Changlog

  • 2.0.18 Thanks to kamilgrzegorczyk , Fixing clone field issue in repeater
  • 2.0.17 Thanks to leocaseiro, Fix Backend Timestamp handling: render_field and Tested Up WordPress 4.0
  • 2.0.16 Fix Undefined property: acf_field_date_time_picker::$domain
  • 2.0.15 Thanks to yanknudtskov, the plugin now works with ACF 5.0
  • 2.0.14 Added new languages/acf-field-date-time-picker.po file (note, renamed the language file)
  • 2.0.13 Fixed compatibility bug with ACF 4.3.5 NOTE: 2.0.13 requires ACF 4.3.5 or later
  • 2.0.12 Added support for date format dd/mm/yy + bug fix
  • 2.0.11 Added option to retrive field values, using the_field() and get_field(), as a timestamp
  • 2.0.10 Removed “value” from defaults
  • 2.0.9 Thanks to flahertydaf, the plugin is now working with the latest ACF version. Also replaced DateTime::createFromFormat (PHP 5 >= 5.3.0), with strtotime and did minor bugfixes
  • 2.0.8 Adds option to store the date and time field as a UNIX timestamp or not.
  • 2.0.7 Bug fix. 2.0.6 assumed that the stored date and time was in UNIX timestamp format. 2.0.7 will check and only convert if the date and time is.
  • 2.0.6 Changed how the Date and Time Picker field is triggered when ACF adds a new Date and Time Picker field to the DOM. Saves the Date and Time Picker field as an UNIX timestamp to MySQL. Use the PHP date function when you use it in your theme.
  • 2.0.5 When enqueuing JavaScripts, replaced dependecy of jquery-ui-datepicker with acf-datepicker
  • 2.0.4 Updated JavaScript language detection and loading
  • 2.0.3 Fixed Repeater field bug. Added support for including the field in a theme
  • 2.0.2 Total rewrite, based on the acf-field-type-template. Works with ACF v3 and ACF v4.
  • 1.2.0 Updated jquery-ui-timepicker-addon.js to the latest version (1.0.0) and added localization support.
  • 1.1.1 Fixed a small bug
  • 1.1 Change name to Date and Time Picker to reflect the new option to select between Date and Time picker or Time Picker only. Thanks to Wilfrid for point this out (not sure why I didn’t include it in 1.0)
  • 1.0: Initial version

Latest version

Prerequisite

Advanced Custom Fields WordPress plugin installed and activated.

Installation

This add-on can be treated as both a WP plugin and a theme include.

Install as Plugin Copy the ‘acf-date_time_picker’ folder into your plugins folder Activate the plugin via the Plugins admin page

Include within theme This doesn’t work at the moment, I’m looking into it.Copy the ‘acf-date_time_picker’ folder into your theme folder (can use sub folders). You can place the folder anywhere inside the ‘wp-content’ directory Edit your functions.php file and add the code below (Make sure the path is correct to include the acf-date_time_picker.php file)

Create a Date and Time Picker field

Add Date and Time Picker field
To set the date and time format when you create the field, you have to create a string using the letters below. Date format

Time format

Examples

  • yy-mm-dd: 2013-04-12
  • HH:mm: 24 hour clock, with a leading 0 for hour and minute
  • h:m tt: 12 hour clock with am/pm, no leading 0

Retrieving Time Picker values

To get a general understanding on how to retrieve values from ACF, see the examples in the ACF Documentation.

Simple example

Get the field in the same format as you set it when you created the field, using get_field():

Changing date and time format

When adding a date-and-time field, choose “Get field as timestamp” and use date_i18n to do something like this:

Together with the repeater field

Here’s how I retrieve that values from the example in the screen shot

Localization

The plugin will, based on WPLANG in wp-config.php, try to load the correct localization/jquery-ui-timepicker-LOCALE.js file.

If your language doesn’t exist in localization/jquery-ui-timepicker-LOCALE.js, you have to do the translation your self:

  1. In acf-date_time_picker/lang, copy acf-date_time_picker.po to acf-date_time_picker-languagecode_COUNTRYCODE.po e.g: acf-date_time_picker-nb_NO.po
  2. Edit the file using poedit or its like, and save the .mo file in acf-date_time_picker/lang

Debugging

If you suspect that acf-date_time_picker doesn’t enqueue the scripts in the right order, install acf-debug-list-enqueued-scripts and add the field “ACF DEBUG: List Enqueued Scripts” to your fields. When you open Posts->Add New, you should get a list like the following:

Credit

Date and Time Picker field for Advanced Custom Fields uses the jQuery timepicker addon by Trent Richardson. Copyright 2012 Trent Richardson. Dual licensed under the MIT and GPL

171 thoughts on “Date and Time Picker field for Advanced Custom Fields

  1. Erick

    Hey man, this plugin is just pure awesomeness, thank you !
    Just wanted to know here how would I proceed on querying the database for my posts using wp_query, trying to find posts between an interval ? I noticed I can do it with the default acf date picker only when my arguments are like this:

    this works with the default date picker, but I believe I have to change something, so that I get the results I’m expecting, hope you can help me here… thank you again for this awesome piece of work !! :)

    Reply
    1. Per Søderlind Post author

      Guess you are using two date-time pickers (?).

      Try something like this:

      Edit: You should have a look at the article at https://premium.wpmudev.org/blog/mastering-wp-query/ and the date range example

      Reply
  2. Matt Kreiling

    I would like to be able to sort posts by time of day using wp_query (orderby and meta_value_num). Is there a way to generate a timestamp, without the date, only time, yet preserving the ability to display 12-hour time within the loop?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">