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.

Changlog

  • 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

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

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

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

  1. Vince

    I am trying to install the date/time picker and am having problems modifying the functions file to make it work. I keep getting an error when I insert the code you suggested into the functions.php file.
    This is the code I am inserting:
    add_action(‘acf/register_fields’, ‘my_register_fields’);
    function my_register_fields()
    {
    include_once(‘acf-date_time_picker/acf-date_time_picker.php’);
    }
    Where in the functions.php file do I need to insert?

    Is it correct that the reference ‘acf-date_time_picker/’ is to a folder in my themes/ifeaturepro/ directory…if so I have a folder named /themes/ifeaturepro5/acf-field-date-time-picker/ that does not match the folder reference in your suggested insert. Is this the cause of my problem?
    Your help would be greatly appreciated…thanks.

    Reply
    1. Per Søderlind Post author

      Just discovered that including the date and time picker in functions.php doesn’t work. For now, please add it as a plugin.

      Reply
  2. Bob

    hi there,

    great plugin! but:
    What could be the reason that the time format “HH:mm” does not work for me?
    Wordpress forget my 24-hour-format, instead next time I edit my “time”-field, shows me “hh:mm”

    thanks for any advice,
    Bob

    Reply
    1. Martijn

      I have the same issue.
      Date as d MM yy and Time as HH:mm
      Saving just clears the field.

      Also had issues saving in other formats, it’s was mixing up the year and months, entered 2014 as year and then it saved as 2020.

      Saving and displaying/using field as timestamp.

      Reply
  3. Joshua Michaels

    First, great Add-on – thank you!

    I’m having two issues:

    1) I have the date picker date set to yy-mm-dd and Save as Timestamp enabled. But I would like to format the date/time differently at certain locations in my plugin. It says to use the PHP date function but I’m not clear on exactly how to get the field value and then use that function. Can you give a quick example?

    For my purposes, in some places I would like to show the date as 2014-02-28 but in others February 28, 2014, etc.

    2) I’m using ACF in a plugin I’m creating and want to include the date time picker in my plugin (not in a theme). I copied the acf-date_time_picker folder to my plugin folder and I tried using this:

    but I cannot get it to work. It works as a standalone plugin but obviously I would like to include it directly.

    Reply
    1. Per Søderlind Post author

      Hi Joshua,

      1) When adding a date-and-time field, it you choose to “Get field as timestamp” you can do something like this:

      2) If you’d like to include my plugin in yours (and please feel free to do that), you should add the code from acf-date_time_picker.php to your plugin (i.e. not include acf-date_time_picker.php)

      Feel free to ask if you have any more questions.

      Reply
      1. Joshua Michaels

        Thanks Per, that worked perfectly. Just offhand, do you know a way to show lowercase am or pm on a Mac? %P is not supported.

        Will add the code to my plugin and see how that goes.

        Thanks for the help!

        J

        Reply
        1. Joshua Michaels

          If anyone is looking, using Per’s code above to format your datetime:

          would result in: Tuesday, February 25, 2014

          would result in: 5:49pm

          Reply
        2. Per Søderlind Post author

          I was a bit quick (and tired) when I answered. You should use the WordPress function date_i18n as in

          for lower case am/pm, use “a”

          Reply
  4. Joshua Michaels

    Trying to only show posts from today or in the future using the date picker. Below is my loop arguments but with this it only shows all event posts (in past and future). What am I missing here?

    Reply
  5. Frank

    Hey there! Really nice plugin.

    I have several fields on my site that use the “Time Picker” option, and looking in the database, I’m confused as to what format these are being saved in.

    I get a value like: 1392591600
    Which, assuming it’s a timestamp, converts to Sun, 16 Feb 2014 23:00:00 GMT

    The thing is, this field should only be a time, not a date as well, right? I need to access the value directly from the database (i.e. can’t use PHP), and convert to a readable time, and I’m unsure how to parse this without PHP.

    Reply
    1. Per Søderlind Post author

      Hi Frank,

      You have two option, either save the time as a string (select “No” to save as timestamp when you create the field) or as a timestamp.

      A timestamp (number of seconds since 1/1/1970) will contain a date. If your field is a time field, todays date will be added. You can convert the timestamp to a time value in MySQL using something like this:

      Reply
  6. Melissa

    Hey there. This seems like exactly what I’ve been looking for. However, I’m having problems getting the date picker to show up as an option in the field type drop down. I’ve tried installing this add-on using both the regular plugin install and the include options, and neither seems to work. After install, the add-on is listed as installed in the “Add-Ons” section under “Custom Fields”, but when I drop down the field types when creating a custom field, it’s not listed as an option. I installed the debugging/list enqueued scripts plugin, and it’s displaying all expected scripts. Any suggestions? Thanks for your help!

    Reply
  7. Mat Doidge

    Hi there,

    I’m having problems formatting the date from a date + time picker. So far I’ve tried:


    $field = get_field("gig_datetime");
    echo date_i18n('d-m-y', $field);

    But this doesn’t get any values from the plugin and instead just uses todays date. I’m confused!

    Reply
    1. Per Søderlind Post author

      When you created the field, did you choose “Get field as timestamp”? Please see my example above.

      Also, what’s $field returning? ( echo $field;)

      Reply
      1. Mat Doidge

        Yeh that’s what’s got me confused. Yep it’s set to save field as timestamp and get field as timestamp. If i used echo $field; in my loop, I get nothing. Does that mean it’s not getting the field correctly?

        Reply
        1. Per Søderlind Post author

          Yes, try to use the post_id, as in my simple example.

          Your loop is in a single post ? If not, you’ll have to use the post_id. If it’s in a single post, the post you’re testing on has it a date-time value saved?

          Reply
  8. Aksel

    For some reason, if I have multiple timepickers in a repeater field, only one of them seems to save. I’ve created two timepicker fields with fieldnames: openingTime and closingTime in a repeater field. openingTime is saved and displayed correctly, but closingTime doesn’t seem to save.. it always turn up empty upon saving post :(

    Any idea what might be the problem / how to correct the issue?

    Reply
    1. Per Søderlind Post author

      Excellent idea, I’ll add it to the next release (in a couple of weeks, vacation first)

      Reply
  9. Lucho

    I have installed the latest version of the plugin.
    It works, except that when I echo it on the site, I get (for any date) 21/08/70

    The code I have is:

    Thanks for your help in advance.

    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=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">