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 and v4. ACF PRO 5.0+ is no longer supported, ACF PRO has its own date and time picker.

Brought To You By

[acknowledge_me owner="soderlind" repo="acf-field-date-time-picker" total="50"]

Changlog

Please see the changelog at GitHub

Latest version

Prerequisite

Advanced Custom Fields WordPress plugin installed and activated.

Installation

Copy the 'acf-date_time_picker' folder into your plugins folder Activate the plugin via the Plugins admin page

Create a 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

d    day of month (no leading zero)
dd   day of month (two digit)
o    day of the year (no leading zeros)
oo   day of the year (three digit)
D    day name short
DD   day name long
m    month of year (no leading zero)
mm   month of year (two digit)
M    month name short
MM   month name long
y    year (two digit)
yy   year (four digit)

Time format

H    Hour with no leading 0 (24 hour)
HH   Hour with leading 0 (24 hour)
h    Hour with no leading 0 (12 hour)
hh   Hour with leading 0 (12 hour)
m    Minute with no leading 0
mm   Minute with leading 0
s    Second with no leading 0
ss   Second with leading 0
l    Milliseconds always with leading 0
t    a or p for AM/PM
T    A or P for AM/PM
tt   am or pm for AM/PM
TT   AM or PM for AM/PM

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():

</p>
<p>echo get_field($field_name);</p>
<p>echo get_field($field_name, $post_id); // from another post</p>
<p>

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:

</p>
<p>// more format examples at https://codex.wordpress.org/Formatting_Date_and_Time#Examples<br />
$format = "F j, Y g:i a";<br />
$timestamp” = get_field($field_name);<br />
echo date_i18n( $format, $timestamp” ); // November 6, 2010 12:50 am</p>
<p>$format = "F j, Y";<br />
$timestamp” = get_field($field_name);<br />
echo date_i18n( $format, $timestamp” ); // November 6, 2010</p>
<p>$format = "l, F jS, Y";<br />
$timestamp” = get_field($field_name);<br />
echo date_i18n( $format, $timestamp” ); // Saturday, November 6th, 2010</p>
<p>

Together with the repeater field

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

<br />
&lt;?php<br />
$rows = get_field('tasks'); // 'tasks' is the repeater field name<br />
if($rows) {<br />
echo '&lt;ul&gt;';<br />
foreach($rows as $row) {<br />
echo '&lt;li&gt;task = ' . $row['task'] . ', start = ' . $row['start'] .', start = ' . $row['end'] .'&lt;/li&gt;';<br />
}<br />
echo '&lt;/ul&gt;';<br />
}<br />
?&gt;<br />

Localization

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

<br />
function input_admin_enqueue_scripts() { // simplyfied, please see plugin source if you plan to use this<br />
$js_locale = $this-&gt;get_js_locale(get_locale()); i<br />
f ( file_exists( $this-&gt;settings['path'] . '/js/localization/jquery-ui-timepicker-' . $js_locale . '.js' ) ) {<br />
wp_enqueue_script( 'timepicker-localization', $this-&gt;settings['dir'] . 'js/localization/jquery-ui-timepicker-' . $js_locale . '.js', array( 'jquery-ui-timepicker' ), $this-&gt;settings['version'], true );<br />
} else {<br />
. . .<br />
}<br />
}<br />
function get_js_locale($locale) {<br />
$dir_path = $this-&gt;settings['path'] . 'js/localization/'; $exclude_list = array(".", "..");<br />
$languages = $this-&gt;ps_preg_filter("/jquery-ui-timepicker-(.*?).js/","$1",array_diff(scandir($dir_path), $exclude_list));<br />
$locale = strtolower(str_replace("_", "-", $locale));<br />
if (false !== strpos($locale,'-')) {<br />
$l = explode("-",$locale);<br />
$pattern = array('/' . $locale . '/','/' . $l[0] . '/', '/' . $l[1] . '/');<br />
} else {<br />
$pattern = array('/' . $locale . '/');<br />
}<br />
$res = $this-&gt;ps_preg_filter($pattern,"$0",$languages,-1,$count);<br />
return ($count) ? implode("", $res) : 'en';<br />
}<br />
function ps_preg_filter ($pattern, $replace, $subject,$limit = -1, &amp;$count = 0) {<br />
if (function_exists('preg_filter'))<br />
return preg_filter($pattern, $replace, $subject,$limit,$count);<br />
else<br />
return array_diff(preg_replace($pattern, $replace, $subject,$limit,$count), $subject);<br />
}<br />

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