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"]
Please see the changelog at GitHub
Advanced Custom Fields WordPress plugin installed and activated.
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)
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
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.
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
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:
- 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
- Edit the file using poedit or its like, and save the .mo file in acf-date_time_picker/lang
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:
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