Per Søderlind

I code for fun

  1. general
  2. Date and Time Picker field for Advanced Custom Fields

Date and Time Picker field for Advanced Custom Fields

 

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

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

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

[php]

echo get_field($field_name);

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

[/php]

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:

[php]

// more format examples at https://codex.wordpress.org/Formatting_Date_and_Time#Examples
$format = “F j, Y g:i a”;
$timestamp” = get_field($field_name);
echo date_i18n( $format, $timestamp” ); // November 6, 2010 12:50 am

$format = “F j, Y”;
$timestamp” = get_field($field_name);
echo date_i18n( $format, $timestamp” ); // November 6, 2010

$format = “l, F jS, Y”;
$timestamp” = get_field($field_name);
echo date_i18n( $format, $timestamp” ); // Saturday, November 6th, 2010

[/php]

Together with the repeater field

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

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

Localization

The plugin will, based on WPLANG in wp-config.php, try to load the correct localization/jquery-ui-timepicker-LOCALE.js file.
[php minimize=”true”]
function input_admin_enqueue_scripts() { // simplyfied, please see plugin source if you plan to use this
$js_locale = $this->get_js_locale(get_locale()); i
f ( file_exists( $this->settings[‘path’] . ‘/js/localization/jquery-ui-timepicker-‘ . $js_locale . ‘.js’ ) ) {
wp_enqueue_script( ‘timepicker-localization’, $this->settings[‘dir’] . ‘js/localization/jquery-ui-timepicker-‘ . $js_locale . ‘.js’, array( ‘jquery-ui-timepicker’ ), $this->settings[‘version’], true );
} else {
. . .
}
}
function get_js_locale($locale) {
$dir_path = $this->settings[‘path’] . ‘js/localization/’; $exclude_list = array(“.”, “..”);
$languages = $this->ps_preg_filter(“/jquery-ui-timepicker-(.*?).js/”,”$1″,array_diff(scandir($dir_path), $exclude_list));
$locale = strtolower(str_replace(“_”, “-“, $locale));
if (false !== strpos($locale,’-‘)) {
$l = explode(“-“,$locale);
$pattern = array(‘/’ . $locale . ‘/’,’/’ . $l[0] . ‘/’, ‘/’ . $l[1] . ‘/’);
} else {
$pattern = array(‘/’ . $locale . ‘/’);
}
$res = $this->ps_preg_filter($pattern,”$0”,$languages,-1,$count);
return ($count) ? implode(“”, $res) : ‘en’;
}
function ps_preg_filter ($pattern, $replace, $subject,$limit = -1, &$count = 0) {
if (function_exists(‘preg_filter’))
return preg_filter($pattern, $replace, $subject,$limit,$count);
else
return array_diff(preg_replace($pattern, $replace, $subject,$limit,$count), $subject);
}
[/php]
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

Previous

Adding WP-PageNavi to the Yoko theme

Next

An alternative “Hide ACF Menu from Clients”

184 Comments

  1. Hello,
    It was great to have a DateTime picker (instead of Date picker and Time picker). Do you if this plugin exists ?
    Thanks

  2. azyogadude

    when do you think you will have plugin ready for download?
    thanks

    • PerS

      It’s available but not as a plugin. See the download link and instructions above.

    • azyogadude

      hi
      i am trying to extract hour & minute from date time picker but has no idea what function to use .

      Thanks

      • PerS

        Hi,

        I’ve updated the post above with information on how to retrieve values.

      • azyogadude

        thanks!! i was able to retrieve by using date and datetostr functions

  3. Tai

    Am having issues :) On posts the date / time picker field is just displaying as a text field. When you click on it the date / time picker is not loaded. I have tried disabling other plugins, removing other jquery scripts I was using and removing other custom acf fields. Any ideas?

    WordPress: 3.3.1
    Acf: 3.1.6

    • PerS

      Have you tested for javascript errors (using firebug etc) ?

      I’m also running WordPress 3.3.1 and ACF 3.1.6, and I can’t find any errors.

    • PerS

      .. also, do a view-source and see if the links to the following files exist and are correct:

      • acf_time_picker/js/jquery-ui-timepicker-addon.js
      • acf_time_picker/js/timepicker.js
      • acf_time_picker/css/jquery-ui.css
      • acf_time_picker/css/timepicker.css
  4. Dale Jacobs

    Great plugin, thank you!

    I trying to get the saved data to be yyyy-mm-dd hh-mm in the database, but display mm/dd/yy hh:mm for the editor section.

    Editing your custom field, I thought I could use the update_value function to do the saving of the new date format with the below:

    // do stuff with value
    //$value = date(“Y-m-d g:i”, strtotime($value));

    But it doesn’t seem to be firing the update_value, and just saving the default field value that is shown.

    My plan was the than to grab the value and display it differently for the edit post screen with the below:
    value=”‘ . date(“m/d/Y g:i”, strtotime($value)) . ‘”

    Do you happen to have any idea why the Update_value is not working on save?

    Maybe this would be an option to add for the plugin if we can get it working? This was sorting with WP_Query and date/time field would sort correctly but the client would still see a pretty date format in the admin section.

  5. Tai

    Ah yes, was a space in my theme name >.< so was incorrect path to js and css files.

    Awesome plugin extension, cheers

  6. PerS

    Hi Dale,

    This is my first add-in to ACF. I’ll dive into the code and see if I missed something (haven’t looked at Update_value, so I must be missing something). I’ll post here when/if I find a fix.

  7. PerS

    update_value in my add-in is triggered. I added the following to log what was happening:

    [php]
    function update_value($post_id, $field, $value)
    {
    // do stuff with value

    file_put_contents(dirname(__file__) . ‘/log/log.txt’ , sprintf("%s: %s – %s – %sn",date("Y-m-d H:i:s"),$post_id, print_r($field,true), $value), FILE_APPEND | LOCK_EX);
    // save value
    parent::update_value($post_id, $field, $value);
    }
    [/php]

    And got this in acf_time_picker/log/log.txt ( acf_time_picker/log is world writable):

    [php]
    2012-04-04 23:42:51: 54 – Array
    (
    [key] => field_4f595252d13c8
    [label] => Start
    [name] => tasks_0_start
    [type] => time_picker
    [timepicker_show_date_format] => true
    [timepicker_date_format] => mm/dd/yy
    [timepicker_time_format] => h:m TT
    [order_no] => 1
    )
    – 04/05/2012 1:25 AM
    [/php]

    • Dale Jacobs

      I wonder what I am doing wrong.

      Here is the function I edited, I am using the basic srtoftime to take out any extra variables. The field has “mm/dd/yy hh:mm” in it. After saving, it uses that format instead of stroftime. When you ran the test did it update the date post_meta in the database with the new value?
      [php]
      function update_value($post_id, $field, $value)
      {
      // do stuff with value
      $value = strtotime($value);
      // save value
      parent::update_value($post_id, $field, $value);
      }
      [/php]
      From the log it would mean it might be on ACFs end?

      Thank you for taking the time on this.

      • PerS

        Just tested and it worked fine, got 1333589100 when I retrieve the value in my theme. Are you sure you are retrieving it correctly ?

        • Dale Jacobs

          Firstly I want to apologize for using your pressure time on an issue that was my fault. I had duplicated an advanced custom post type post, so in the post meta there were two “start_date” fields with the same field_randomstrings. I deleted the duplicate field and created a new Start Date and it works as its meant too, again I feel bad I used your time (also wasting hours of my own!)

          Maybe adding a checkbox to save unix or wordpress date stamp in database could be an option you add in any future release?

          For anyone else who wants to be hack/show a clean date for the client, but add a database entry that will be easily sortable by queries, you can use the below code.

          In the file acf_time_picker.php in the function “update_value” add the line below. This will add the date format as normal post dates.
          [php]
          // do stuff with value
          $value != ” ? $value = date("Y-m-d g:i", strtotime($value)) : ”;
          [/php]
          Then to show a different date for the client in the admin section and front end add the below line to “get_value” function.
          [php]
          // format value
          $value != ” ? $value = date("m/d/Y g:i a", strtotime($value)) : ”;
          [/php]
          With the above make sure to set the php date format to what you set when you added the timepicker field.

          • PerS

            No problem Dale, glad you got it to work.

            I’ll look into adding this option to the add-in, it’s a good idea.

  8. Jonathan

    Hej Per!
    Vill bara tacka för din väldigt händiga add-on. Precis vad jag letade efter :)

  9. ikemarrus

    I’m getting these warning messages when I try to define a timepicker field:

    Notice: Use of undefined constant acf – assumed ‘acf’ in path/acf_time_picker/acf_time_picker.php on line 104

    Notice: Use of undefined constant acf – assumed ‘acf’ in /path/acf_time_picker/acf_time_picker.php on line 105

    • PerS

      Yepp, you are correct. Thank you for notifying me. It’s fixed and a new version is available in the download link above.

  10. ikemarrus

    That was fast – thanks!

  11. Awesome, thanks for this plugin really great work! Following on from Dale’s posts earlier I have added some formatting to the save + get functions so that it is stored in the database as a unix timestamp to help me order the posts by the date and time field.
    I have posted it up as gist for any copy and paste folk
    https://gist.github.com/2503878/46dc4e1b0c7f4248fb58a30f6a49b0dde8b35ee2

  12. Stian Andreassen

    Brilliant plugin! Thanks, Per!

    Is there any way to use localization? The jQuery timepicker comes with language files, yes?

    • PerS

      Selvsagt :)

      The following is localized:
      [php]
      wp_localize_script(‘timepicker’, ‘timepicker_lang’, array(
      ‘time_text’ => __("Time",’acf’),
      ‘hour_text’ => __("Hour",’acf’),
      ‘minute_text’ => __("Minute",’acf’),
      ‘second_text’ => __("Second",’acf’)
      ));
      [/php]

      [javascript]
      jQuery(function() {
      jQuery("body").on("focusin", "input[type=text].time_picker", function(){
      self = jQuery(this);
      self.datetimepicker({
      timeOnly: (self.attr(‘data-date_format’) == undefined),
      timeFormat: self.attr(‘data-time_format’),
      dateFormat: (self.attr(‘data-date_format’) != undefined) ? self.attr(‘data-date_format’) : ‘mm/dd/yy’,
      ampm: (self.attr(‘data-time_format’).search(/t/i) != -1),
      timeOnlyTitle: self.attr(‘title’),
      timeText: timepicker_lang.time_text,
      hourText: timepicker_lang.hour_text,
      minuteText: timepicker_lang.minute_text,
      secondText: timepicker_lang.second_text
      });
      });
      });
      [/javascript]

  13. Stian Andreassen

    Hur bra som helst! ;-)

    Would be great if there was localization for names of days and months.

    • PerS

      I see what you mean. I will add localization for days and months using jquery-ui-i18n.min.js, but I don’t have time until next week-end.

    • PerS

      The latest version, supporting localization, is available (got some spare time). Please test

  14. Jonny

    Using get_stylesheet_directory_uri() to enqueue scripts is not good practice as it makes assumptions about where the script will be located which is always a bad idea. Better to use dirname(__FILE__).

    • PerS

      Agree, I’ll look into it.

    • PerS

      Eh .. I was a bit quick. According to the wp_enqueue_script() documentation, the $src parameter should “use plugins_url() (for Plugins) and get_template_directory_uri() (for Themes) to get a proper URL”.

      I’m open to reconsider, but then your argument, with example code, must be good ;)

      • Jonny

        plugins_url(script_file, __FILE__) would be the correct way to do it I think where script_file is the script filename relative to the plugin directory.

  15. Su

    I’m seeing similar behavior to Tai above(unresolved), but in looking into things, there’s something weird going on:

    1. The stylesheets and scripts required by the field /are/ being included in the source…
    2. …but their URLs result in a 404 page from WordPress…
    3. …but only due to the query parameter.

    So for example, the jQuery UI CSS is being loaded via:
    example.com/wp-content/themes/mytheme/acf_time_picker/css/jquery-ui.css?ver=3.4
    That URL produces a 404 screen, but:
    example.com/wp-content/themes/mytheme/acf_time_picker/css/jquery-ui.css
    loads properly.

    This is happening for the resources your field is loading ONLY. I have all sorts of other plugins loading various things on this install.
    One thing possibly worth noting is that yours is the only code that’s pulling CSS/JS from the theme directory to the admin area. Maybe there’s some kind of edge case there? I don’t think I’ve seen it done before.
    I’m using WP 3.4.

    I’m going to try and repro this later on a cleaner, unrelated installation and/or add plugins back in to see if there’s a conflict, but wanted to document in case someone can do anything with just this.

    • PerS

      Hi Su,

      Thank you for your thorough feedback.

      Before I dig into the WordPress source; Have you flushed the permalink cache after you upgraded to 3.4 ? You flush the permalink cache by re-saving your permalinks in wp-admin >> settings >> permalinks

      • Su

        It must’ve been something along that line. Unfortunately, it’s “fixed itself” so I can’t absolutely confirm. I’d already deleted the custom field and removed the include code from functions.php, and after re-adding them just now the picker comes up properly.

        I’m pretty sure that in the interim I did /not/ modify any content or the permalink settings(it’s a dev install and I’m only doing theme work), but I assume that cache is periodically rebuilt on its own.

        I’ve still got some things to do in there, so I’ll try and pay closer attention to see if it comes up again.

        • PerS

          Isn’t it fun when things “fixes itself” :)

          Please don’t hesitate to contact me if it happens again (or if you find new bugs).

  16. Brent

    Great add-on! However, I’m having trouble querying a Date/Time field and sorting by the value. Has anyone else had success with this? Thanks.

  17. Rachel Morrissey

    I am getting the error “Object doesn’t support property or method ‘datetimepicker'”. Any ideas??

  18. alan colyer

    Thanks for this, you saved me a headache today :)
    working great on WP 3.4.2 and ACF 3.4.3

  19. credos

    javascript error self.datetimepicker is not a function not working? Any idea where can be a problem?

  20. PerS

    Have you had a look at the comment above, with my suggestions. Maybe you have the same problem?

  21. zander

    Hi,

    the files aren’t linking properly in the source – it seems to be being caused by the version number which is beign put into the head… so the link in my source is ‘a href=’http://www.mysite.org.uk/dev/wp-content/themes/mytheme/acf_time_picker/css/jquery-ui-timepicker-addon.css?ver=3.4.2’

    that url resolves without the version number. so how do I stop it enqueing with the version number?

  22. zander

    further to my last comment – I have flushed the permalink cache and am still having problems

  23. zander

    doh – flushed again – and it works!!! sorry!

    Is there anyway to add seconds – or add them as 00

    Thanks

  24. Sascha

    Hi

    For me the date / time picker is not displayed.
    It seems as if the two JavaScript files are not included. But the two CSS files, however, are involved.
    What can I do?

  25. Sascha

    Now i found another plugin. With this Plugin the time picker works fine

    • PerS

      Excellent, you had me worried. You’re the only one that’s reported this “bug”. What’s the name of the other plugin ?

  26. Sascha

    The name of the plugin is Custom Field Suite

    • PerS

      Custom Field Suite, a fork from Advanced Custom Fields, is not supported. I bet you’re asking for lots of problems if you try to run both of them on the same WP installation.

  27. Great work, thanks for the plugin really useful.

  28. Samee problem here. ACF 3.5.1 – time picker doesn’t show up. I’m pretty sure the problem lays in the way the JS scripts are enqueued.

  29. PerS

    Please see the newly added debug information. It’s tested with the lates ACF version (v3.5.1)

  30. TheWalker

    Hi,

    Very nice add-on for ACF!
    I changed the function get_value and update_value, to change the format of date, without change the format of input to user.
    The reason for do that, is get posts ordered by date and time using the meta_query.

    Input: dd/mm/yy hh:mm
    Saved Field: yy-mm-dd hh:mm

    I don’t know if this is the right way, because the user can select Date and time, or only time in custom fileds configuration.

    The code:
    [php]
    function update_value($post_id, $field, $value)
    {
    // do stuff with value
    $day = strval(substr($value,0,2));
    $month = strval(substr($value,3,2));
    $year = strval(substr($value,6,4));
    $hour = strval(substr($value,11,2));
    $minute = strval(substr($value,14,2));
    $value = $year . ‘-‘ . $month . ‘-‘ . $day . ‘ ‘ . $hour . ‘:’ . $minute;

    parent::update_value($post_id, $field, $value);
    }

    function get_value($post_id, $field)
    {
    // get value
    $value = parent::get_value($post_id, $field);

    // format value
    $year = strval(substr($value,0,4));
    $month = strval(substr($value,5,2));
    $day = strval(substr($value,8,2));
    $hour = strval(substr($value,11,2));
    $minute = strval(substr($value,14,2));
    $value = $day . ‘/’ . $month . ‘/’ . $year . ‘ ‘ . $hour . ‘:’ . $minute;

    // return value
    return $value;
    }
    [/php]

  31. niek

    Hi guys,
    Am struggling to find the right info on how to adjust the way the date displays on my site, currently like this: 20121129, and should be: 29 November 2012. Any advice would be much appreciated!

    • PerS

      When you define the field, set the date format as “d MM yy”

      • niek

        Thanks, I’d hoped it was that simple, but actually I need it to display that on the actual site, not just in the admin… ?

        • PerS

          It will have the same format as in the admin, as long as you don’t modify the data in update_value. If you do, you have to reformat it before you display it in your theme.

  32. Okay, so I tried installing this addon, and now my site has gone haywire:

    Warning: include(/PATH/wp-content/themes/arthemia/acf_time_picker/acf_time_picker.php) [function.include]: failed to open stream: No such file or directory in /PATH/wp-content/plugins/advanced-custom-fields/acf.php on line 218

    Warning: include() [function.include]: Failed opening ‘/PATH/wp-content/themes/arthemia/acf_time_picker/acf_time_picker.php’ for inclusion (include_path=’.:/usr/share/pear:/usr/share/php:/PATH/wp-content/plugins/mailchimp-widget/lib’) in /PATH/wp-content/plugins/advanced-custom-fields/acf.php on line 218

    Fatal error: Class ‘acf_time_picker’ not found in /PATH/wp-content/plugins/advanced-custom-fields/acf.php on line 220

    Any suggestions?

    • PerS

      Looks like you have an error in arthemia/functions.php where you include the time picker field. Please post what you added.

  33. Never mind, the addon works just fine. I put the addon-files in the wrong place.

    Thanks for this! This is going to make things a lot easier. I find it weird that isn’t a standard feature in ACF to be honest.

  34. Carl Wilhelm

    For some reason, the buttons for the next and previous months are missing from the date & time picker window. It’s worked a few times before, but I can’t figure out what’s wrong. One thing I’ve noticed is that when the buttons are missing, the background for header where the name of the month is displayed is blue. When the buttons are there the header background is gray. Could this stem from a plug-in conflict or something like that?

  35. Hi PerS,
    Just downloaded this addon. It looks like it’s just what I need. But I can’t seem to make it work! Added the files but I’m getting a text field and no time picker. I’m a noob don’t know what doing wrong…

    • PerS

      Hi Alicia,
      Please read the comments above and see if you can find the answer on how to fix it there.

  36. Hi PefS,
    Turns out my client doesn’t need a time picker. I will revisit this in the future and add the debug file to see what the problem is. Thanks for your quick response!

  37. David Mosterd

    Hi,

    Great stuff this time picker. I have made a change to it and hope you will add this to your code. (Why not place it in github so we can all do pull requests?)

    http://pastebin.com/YzUAYZ16

    I found it rather a pain that I was forced to place this into my theme folder as I like to keep external things organized. Now it takes __FILE__ and assumes it’s somehwere in the themefolder.

    Check it out. But I have even an better idea. Why not place it on github and lets make this into a plugin? That will be just…. right.

    Let me know if your up to it, if not, I will do it myself but I rather have the original author do this of course.

    Cheers!

    David

  38. David Mosterd

    Hi,

    Checkout http://pastebin.com/YzUAYZ16

    It now uses __FILE__ so you can place it anywhere in your theme.

    If you are up to it: why not make this into a GitHub repo and turn this jewel into a plugin?
    We can use GItHub to develop and use the official WP repo to distribute this.

    Let me know if you are up to it! Or is there a secret GitHub? Could not find it ;)

  39. eaglejohn

    It seems that the add-on “Date & Time Picker” doesn’t work in v4.0 Beta? I’ve used it before in v3.5.8.1 without problems. Any suggestions?

  40. Hi,
    I installed the plugin, but have one problem.
    When I click on input I get this error:
    Uncaught TypeError: Object [object Object] has no method ‘datetimepicker’

    Maybe someone knows how to fix it?

  41. Hi Guys,

    I’m Elliot, the dev behind ACF and just wanted to say hi, thank you for making this field and also chat about the new ACF v4.

    Unfortunately, in v4, I have had to change the way in which we define custom field types, this means your field is not compatible with the new ACF and wont work.

    This said, it will not require much work at all to create a v4 compatible field type!
    Please read the new documentation for creating a field type here:
    http://www.advancedcustomfields.com/docs/tutorials/creating-a-new-field-type/

    You will find that some functions have changed names. I advise that you start with a blank dummy.php field file and copy across your old functions one by one into the new function spaces.

    I’m more than happy to help out with creating a v4 compatible field type, just let me know.

    I’m not sure if you would want to create a new repository or just a new branch, but either way, both versions will need a url for users to find.

    I’m sorry about causing any extra work and hassle, thanks for all your hard work, it’s greatly appreciated!

    Cheers
    Elliot

  42. John Snow

    Hey, if you change “self = jQuery(this);” to “var self = jQuery(this);” on line 6 of timepicker.js it stops causing errors in Internet Explorer 8.

  43. Hey,

    I’d love to try this out, but the download goes to a 404 – any idea why?

  44. download is working again, and the plugins installs nicely – thanks :)

  45. I really like this addon – and the slider is great; however, I’ve had a few integrations where it would be helpful if A) it was a dropdown instead of slider & B) if it showed 12 hour time instead of military time. Any chance those are available in upcoming release?

    • PerS

      Hi Tim, thank you for your feedback.

      Ref A, I guess you want this for mobile users? It’s a good idea and I’ll try to add it as an option in the next release (coming this week). As of B, you have this option today. You set the time format when you create the field.

    • PerS

      Check out the latest version. It allows you to select between slider or dropdown.

  46. Thank you for your great contribution. I’ve found that the time is saved in Unix timestamp but when it’s read it takes into account the default timezone set in wordpress. So currently I’m on the UTC+ 2 timezone and if i save 17:00 it returns 19:00.

    The workarround in function load_value in date_time_picker-v4.php
    [php]
    //egp mod: sacar la hora bien…
    $default=date_default_timezone_get();
    date_default_timezone_set(‘UTC’);
    $value = date(sprintf(“%s %s”,$this->js_to_php_dateformat($field[‘date_format’]),$this->js_to_php_timeformat($field[‘time_format’])), $value);
    date_default_timezone_set($default);
    [/php]

  47. Bhargav

    When I save both the time and date how can I display only date and only time.

    • PerS

      Let’s assume the following:
      – the filed name is: mydate
      – your date and time format is: m/d/yy h:m tt
      [php]
      // get the field
      $mydate = get_field(‘mydate’);
      //split the field at the first space and store the date in $datepart and the time in $timepart
      list ($datepart, $timepart) = explode(‘ ‘, $mydate, 2);
      [/php]

  48. Ben

    Thanks for the great add-on.

    When I set the date format in the date field settings to “dd/mm/yy” it is saving the day as the month, and the month as the day. Can you help?

    It works fine if I use “mm/dd/yy”. I did try reading through the posts above but couldn’t see a solution.

  49. B Bolla

    Hi,

    i’m having issues with changing the date format to 24hr. Current Date format: YYYY-MM-DD hh:mm:ss

    I realise i need to change form hh to HH. But i have no idea how to do this.

    I have installed the plugin “Advanced Custom Fields: Date and Time Picker”

    Please can someone help me as i am limited skills in this area?

  50. B Bolla

    Hi,

    Can someone please help me.

    I have installed the plugin “Advanced Custom Fields: Date and Time Picker”

    Please can someone tell me how to change to a 24hr time?

    I am a complete novice at this and would appreciate some basic instructions!

    • PerS

      You do that where you edit the field, just change hh:mm:ss to HH:mm:ss and save the filed.

      Also, I recommend that you disable “Save as timestamp” (at the bottom where you edit the field).

  51. I’ve added a custom field to a custom post type, but it’s not saving (or showing ) the Date Time field value. I’ve tried it with and without the timestamp. And i’ve tried it with the regular post type. I’m running PHP 5.3. Any ideas why my values are not saving?

  52. It’s actually saving it in the custom field in the DB so i guess it’s KIND of working. But it’s not showing the value in the meta box field itself. And when i try to resave it, since it’s a required field, it’s needs a new value in the meta box.

  53. I am trying to get the ACF date/time picker to work on a site I am building. It seems like it would be the perfect solution but upon selecting a time and updating the entry, it does not show. If I switch the field type to a text field it shows what seems like a unix time number. Is there a way to get the time picker to display the time I input?

  54. Hey Per,

    Thanks for a great plugin – I am however having a bit of an issue with the time picker, that I was hoping you could help me with..

    When I go back to edit a post, my “time”-field is empty.. I tried changing the field type to “number”, and suddenly the UNIX timestamp shows up, but no matter what else I do to tinker with it, I have to re-enter the value on every edit..

    Any help would be appreciated..!

    • Niklaas

      Hi,

      unfortunately I’m experiencing the same issue. Any help would be appreciated!

      Niklaas

  55. PerS

    There’s a bug in ACF 4.1.5 and up, and customs fields. Please see issue #19 at GitHub

  56. Larry Woods

    Blows when trying to publish a post with date/time:

    Fatal error: Call to undefined method DateTime::createFromFormat() in …/wp-content/plugins/acf-field-date-time-picker/date_time_picker-v4.php on line 293

  57. Larry Woods

    I am using the date in a POST edit. Any way to get the date do display after I have once entered/updated the POST?

    Thanks

  58. Hei,
    Ser at du svarer på skandinaviske henvendelser, så jeg prøver på norsk. Dette er kanskje litt ved siden av henvendelse ellers i denne tråden, men håper du har tid til et svar:

    Jeg har et problem med en oversettelse for en kundeside. Jeg bruker Advanced Custom Fields plugin og trenger å få oversatt månedene som bare kommer på engelsk. Jeg skal benytte norsk, spansk, polsk og engelsk på nettsiden og bruker WPML til dette. Jeg har forandret datepicker eksempelvis d. MM yy på norsk og MM d, yy på engelsk for å har riktig visning av dato. Dette gjør jeg i ACF-plugin’ets kontrollpanel. Problemet er altså at MM alltid viser engelsk tekst. Jeg har prøvd å finne oversettelse på dette i WPML, men finner ikke måneden og oversettelsen i .mo-filene fungerer ikke til dette. Hovedspråket på nettsiden er på norsk – om det er viktig informasjon.

    Vet du hvordan jeg evt. gjør dette eller hvor jeg finner oversettelse på måneder? Jeg er egentlig ikke programmerer, så håper på et ikke-teknisk svar :)

    På forhånd takk!

    • PerS

      Hei,

      Jeg har tatt kontakt med WPML for å bli med på de sitt Go-Global Program , kommer til å legge til WPML-støtte så snart jeg får WPML.

      I dages versjon av pluginet så blir navn på måned og dag blir hentet ut fra $wp_locale og ikke fra en .mo

  59. Mark

    Hi there!

    Is there any way to use this date picker to create a reoccurring event?

    I’m using it to add dates to upcoming events on my website but some of these events occur weekly. At the moment I’m having to go into ever weekly event each week and change the date manually but as the number of weekly events increases it’s becoming a laborious task!

    If there isn’t, does anybody know a way I can get the data straight from the WP database? I’ve set each weekly events post category to “Regular-Event” so I’d need to export the date value for each post with this category, add 604800 seconds then re-import it. I’ve found the date values in the wp_postmeta table but cant figure out how to link this to the Post ID or Term ID!

    Any pointers in the right direction would be much appreciated! :)

  60. Toni

    I’d like to see, that the WP timezone is used when you input and review dates and then save time as UTC like it’s now. This greatly enhances the UX and it’s suberb for developer to handle to date/time.

    If you want to avoid gestimation of WP set timezone give an option to choose the timezone.

    What do you think?

  61. 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.

    • Per Søderlind

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

    • Hi Per,

      I’ve just submitted an update to v.5.0 to the github repo, there’s a but I can’t figure out why happens, but most of the ground work has been done I believe :-)

      • Per Søderlind

        Thanks, I’ll have a look at it. Just came back from vacation

  62. Syl

    Great plugin !

  63. 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

    • 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.

  64. 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:

    [php]
    add_action(‘acf/register_fields’, ‘my_register_fields’);

    function my_register_fields()
    {
    include_once( plugin_dir_path( __FILE__ ) . ‘/acf-date_time_picker/acf-date_time_picker.php’);
    }
    [/php]

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

    • Per Søderlind

      Hi Joshua,

      1) When adding a date-and-time field, it you choose to “Get field as timestamp” you can do something like this:
      [php]
      $field = get_field($field_name); // documented at http://www.advancedcustomfields.com/resources/functions/get_field/
      echo strftime($format, $field); // for $format see http://www.php.net/manual/en/function.strftime.php
      [/php]

      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.

      • 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

        • Joshua Michaels

          If anyone is looking, using Per’s code above to format your datetime:
          [php]
          $field = get_field($field_name);
          echo strftime(‘%A, %B %d, %Y’, $field);
          [/php]
          would result in: Tuesday, February 25, 2014

          [php]
          echo strftime(‘%l:%M%P’, $field);
          [/php]
          would result in: 5:49pm

        • Per Søderlind

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

          [php]
          $field = get_field($field_name);
          echo date_i18n( $format, $field ); // for $format see https://codex.wordpress.org/Formatting_Date_and_Time
          [/php]

          for lower case am/pm, use “a”

          • Joshua Michaels

            Thanks for that…I’m much more familiar with that format.

  65. 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?

    [php]
    $today = date(‘Y m d’);

    $args = array (
    ‘post_type’ => ‘event’,
    ‘post_status => ‘publish’,
    ‘orderby’ => ‘meta_value_num’,
    ‘meta_key’ => ‘event_start_date’,
    ‘meta_value_num’ => $today,
    ‘meta_compare’ => ‘>=’,
    ‘order’ => ‘ASC’,
    ‘posts_per_page’ => ‘number’,
    );
    [/php]

  66. 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.

    • Per Søderlind

      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:

      [sql]

      SELECT TIME(FROM_UNIXTIME(meta_value)) FROM wp_postmeta WHERE meta_key = “field_name”;
      # or
      SELECT TIME_format(FROM_UNIXTIME(meta_value), “%H:%i”) as aTime FROM wp_postmeta WHERE meta_key = “field_name”;

      [/sql]

      • vb078

        Hello
        I working with your plugin
        I try to change the output format (not every time)
        from = d MM yy (date) H:mm (time)
        to = d/m/y

        I checked “Get field as timestamp?” > Yes

        …so I try this:

        I have the same problemle : output look like this :
        01/01/70

        I try the mysql request I have an error.
        Please, if you have some time :-)

        Thx

  67. 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!

  68. 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!

    • Per Søderlind

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

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

      • 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?

        • Per Søderlind

          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?

  69. 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?

  70. Great add on, thanks!
    Just wondering, would it be possible to add a default date time?

    • Per Søderlind

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

  71. That would be awesome! Enjoy your holiday ;)

  72. 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:

    [php]
    $format = “d/m/y”;
    $date = get_field(‘vigencia’);
    echo date_i18n($format, $date)
    [/php]
    Thanks for your help in advance.

  73. Dan

    Thanks for updating it to v5! Great plugin to a great plugin.

  74. marcella

    Hi!
    I have installed the latest version of your plugin. I have to print the date in that way
    “Venerdì, 5 settembre 2014”.
    The only way the date is displayed is “dd/mm/yy” or “yy/mm/dd”
    I tried to change the format date, but the data picker doesn’t work after i refresh the page of the post.
    Where are the files i have to change the format date?
    Thanks for your help!

  75. Dmitriy

    Firstly, thank you for your contribution to wordpress users. I am running WP 4.0 with ACF PRO 5.0.8. The version of your plugin that i installed is 2.0.16. I am having a strange behavior when using the date/time picker inside the repeater field, the “picker” does not come up when I click the field. But, if I Update the post leaving that date/time field blank, then when the page refresh the picker does come up when I click that field. When using date/time field outside the repeater, everything works flawlessly. It does that only when I use date/time picker inside the repeater. I was wondering if you can replicate that behavior. Thank you again.

    • Per Søderlind

      Please try the latest version on github, it has a fix for the repeater field.

      edit: It’s also available via the plugin directory, so you should see the update in Dashboard->Updates

      • Wesley Burden

        Hi Per

        Thanks for the great add-on to acf!

        I’m having the same issue with the date and time picker not working new rows of a repeater field. The field has one row showing as standard and that works, it’s just the user added rows. I’m using the most up-to-date version of your plugin as well as ACF Pro (most up-to-date). I wonder if there is still a bug here. I’ve had a quick look but my coding isn’t quite good enough to help out.

        Thanks

  76. elvis

    Hi,
    It would be great to have the default date/time, but also for the situation where you have a start and end date, that the ‘end’ time would by default be on what you have selected for the start date.
    So maybe the default could be set to the ‘start’ date.
    Similar to how it often works on flight or car booking sites.

    cheers
    elvis

  77. Stefan Froehlich

    Great plugin!

    Unfortunately, I can’t get it working. Tried 6 different WP 4 sites – with ACF 4 (free) and ACF 5 PRO.
    The Picker gets displayed, but as soon as I save the post, the field gets cleared.

    Any suggestions?

    Cheers,
    Stefan.

    • Per Søderlind

      Are you getting any JavaScript errors? Also, try to disable all the other plugins to see if there’s a plugin causing this error.

      • Daniel

        I get the same error as Stefan Froehlich above.

        Using Date and time picker version 2.0.18.1 set to “d. MM yy” on ACF pro 5.1.3 in WP 4.0.1 and no javascript errors in console.

        When I select dates in the same month as the current month, the value saves fine.

        If I choose a date and time in any month before or after the current month though, the value does not get saved. It does not matter if I use the slider or dropdown layouts of the plugin.

        What matters is that my WordPress installation is set to German. If I set it to English, there is no problem. Can you reproduce the issue?

    • Hey,
      i have the same issue.
      I have date and time with this setting (dd.mm.yy – HH:mm) and the line between date and time is the problem.
      But it always worked but now it no longer works.

      Thanks for your reply and the great work.

  78. Is there any way to limit the years available in the date picker control? We really only need dates from the present on into the future; going back 100 years is overkill (in our use case).

    Thanks for the awesome, useful, reliable plugin!

    • Per Søderlind

      Not in the current version, but it’s a good idea. I’ll add it to my todo list.

  79. Wesley Burden

    Thanks for the great add-on to acf!

    I’m having the same issue with the date and time picker not working new rows of a repeater field. The field has one row showing as standard and that works, it’s when new rows are added. I’m using the most up-to-date version of your plugin, ACF Pro (most up-to-date) and wordpress . I wonder if there is still a bug here. I’ve had a quick look but my coding isn’t quite good enough to help out.

    Thanks

  80. Hi

    It’s a great add-on. But, I’m trying to get my head around the various datetime formats. I want to populate my field from $post->post_date (using ACF hooks) with display format like “5. January 2015 19:35”, use your picker to select a date/time and then convert back so as to store the new value in $post->post_date. Which conversions and settings should I use? When I fill the field and it looks right on the screen, the picker doesn’t show the right values.

    Thanks for your help, David

    • Per Søderlind

      `$post->post_date` is in MySQL DATETIME format (‘YYYY-MM-DD HH:MM:SS’ ), so, not having tested it myself, I would convert from MySQL DATETIME to timestamp and save it in your ACF field.

      `$acf_field = strtotime($post->post_date);`

      When updating `$post->post_date` I would do the opposite

      `$post->post_date = date_i18n(‘Y-m-d H:i:s’, $acf_field);`

      • David Christie

        Thanks. That seems mostly to work. Unfortunately ACF overwrote a set of fields with type “text” and so I now have a set back which is pretty annoying. Seems to be caused by a limit in php settings grrrr

  81. Perhaps a good idea would be to provide an option to allow the user also to specify “no time” (in addition to the sliders)…

  82. 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:
    [php]
    // interval between today and last day of this month…
    $date = new DateTime(“03-13-2015”);
    $date_1 = $date->format(“Ymd”);
    $date_2 = $date->format(“Ymt”);

    […]

    // inside the arguments array, looking for my posts between these dates:
    ‘meta_query’ => array(
    array(
    ‘key’ => ‘data_evento’,
    ‘value’ => array( $date_1, $date_2 ),
    ‘type’ => ‘numeric’,
    ‘compare’ => ‘BETWEEN’
    )
    )
    [/php]

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

    • Per Søderlind

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

      Try something like this:
      [php]
      $format = “Y-m-d”; // MySQL date format YYYY-MM-DD
      $start_timestamp = get_field($field_name_start_date);
      $date_1 = date_i18n( $format, $start_timestamp” );
      $end_timestamp = get_field($field_name_end_date); // or $end_timestamp = now(); if you want to find post between $start_timestamp and today.
      $date_2 = date_i18n( $format, $end_timestamp” );

      // your meta query

      [/php]

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

  83. 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?

  84. Hi,

    Great plugin. Just thought I would let you know I had to adjust the code you gave to convert the format a little from the example above to get it to convert dd/mm/yy by first converting it to unix timestamp like this …

    $format = ‘l, F jS, Y’;
    $timestamp = get_field(‘my_date_time’);
    $unixtimestamp = strtotime($timestamp);
    $date = date_i18n( $format, $unixtimestamp ); // Saturday, November 6th, 2010

    Hope it helps :)

  85. Very Cool. Would be extremely helpful to be able to pick start and end times.

    • Per Søderlind

      You can, just create a field for start date+time and a field for end date+time

  86. David Smith

    ACF 5.3.9 now includes its own date/time and time picker fields. Does that deprecate this plugin?

    • Per Søderlind

      Yes, in the latest release I’ve removed support for ACF Pro 5.0+

  87. Is there any way i can use the date time picker to show currently open stores ?

  88. Rikhil Jain

    Can the task be auto-deleted/disappear if the task date has been passed?

  89. johnny

    The date/time displays correctly in wordpress but when I try to export the data i get the following: 1970-01-01 00:00:00

    How do I export the correct data?

Leave a Reply

Powered by WordPress & Theme by Anders Norén