Date and Time Picker field for Advanced Custom Fields

98 Replies

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.

Changlog

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

 add_action('acf/register_fields', 'my_register_fields'); function my_register_fields() { include_once('acf-date_time_picker/acf-date_time_picker.php'); }

1	add_action('acf/register_fields', 'my_register_fields'); function my_register_fields() { include_once('acf-date_time_picker/acf-date_time_picker.php'); }

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.

Here’s how I retrieve that values from the example in the screen shot (note, the example is using the repeater field):

 <?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>'; } ?>

1	<?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>'; } ?>

Localization

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

 function input_admin_enqueue_scripts() { // simplyfied, please see plugin source if you plan to use this $js_locale = $this->get_js_locale(get_locale()); if ( 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); }

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

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

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

Wilfrid March 15, 2012 at 4:24 pm

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

Reply ↓
1. PerS Post authorMarch 15, 2012 at 5:07 pm
  
  In hindsight, I agree. I will update it this plugin to let you choose between DateTime picker and Time picker.
  
  Reply ↓
  1. Wilfrid March 16, 2012 at 4:51 pm
    
    Thank you so much ;)
    
    Reply ↓
azyogadude April 3, 2012 at 7:21 pm

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

Reply ↓
1. PerS Post authorApril 3, 2012 at 8:45 pm
  
  It’s available but not as a plugin. See the download link and instructions above.
  
  Reply ↓
  1. azyogadude April 4, 2012 at 6:11 am
    
    thanks!!
    i was able to install and working great.
    
    Reply ↓
2. azyogadude April 4, 2012 at 6:21 am
  
  hi
  i am trying to extract hour & minute from date time picker but has no idea what function to use .
  
  Thanks
  
  Reply ↓
  1. PerS Post authorApril 4, 2012 at 12:27 pm
    
    Hi,
    
    I’ve updated the post above with information on how to retrieve values.
    
    Reply ↓
  2. azyogadude April 4, 2012 at 8:37 pm
    
    thanks!! i was able to retrieve by using date and datetostr functions
    
    Reply ↓
Tai April 4, 2012 at 7:22 pm

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

Reply ↓
1. PerS Post authorApril 4, 2012 at 8:20 pm
  
  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.
  
  Reply ↓
2. PerS Post authorApril 4, 2012 at 8:29 pm
  .. 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
  Reply ↓
Dale Jacobs April 4, 2012 at 10:02 pm

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.

Reply ↓
Tai April 5, 2012 at 1:00 am

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

Awesome plugin extension, cheers

Reply ↓
1. PerS Post authorApril 5, 2012 at 1:58 am
  
  Thanks :)
  
  Reply ↓
2. Torcsy January 14, 2013 at 12:16 am
  
  So how do we get the correct path if there is a space in our child theme name?
  
  Great plugin otherwise.
  
  Reply ↓
  1. PerS Post authorJanuary 14, 2013 at 1:25 am
    
    Simple answer, don’t have a space in the child theme(path) name, it’s bad practice.
    
    If you use space in path names you’re asking for trouble, non of the core WordPress functions like plugins_path() and get_stylesheet_directory uri() escapes space.
    
    Reply ↓
PerS Post authorApril 5, 2012 at 1:21 am

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.

Reply ↓

PerS Post authorApril 5, 2012 at 1:51 am

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

	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);
	}

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);

}

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

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

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

Reply ↓

Dale Jacobs April 5, 2012 at 2:09 am

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?

function update_value($post_id, $field, $value)
	{
		// do stuff with value
		$value = strtotime($value);
		// save value
		parent::update_value($post_id, $field, $value);
	}

function update_value($post_id, $field, $value)

{

// do stuff with value

$value = strtotime($value);

// save value

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

}

From the log it would mean it might be on ACFs end?

Thank you for taking the time on this.

Reply ↓

PerS Post authorApril 5, 2012 at 3:57 am

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

Reply ↓
1. Dale Jacobs April 5, 2012 at 7:45 am
  
  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)) : '';
  
  1
  2
  
  // do stuff with value
  $value != '' ? $value = date("Y-m-d g:i", strtotime($value)) : '';
  
  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)) : '';
  
  1
  2
  
  // format value
  $value != '' ? $value = date("m/d/Y g:i a", strtotime($value)) : '';
  
  With the above make sure to set the php date format to what you set when you added the timepicker field.
  
  Reply ↓
  1. PerS Post authorApril 5, 2012 at 6:38 pm
    
    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.

Jonathan April 12, 2012 at 4:21 pm

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

Reply ↓
1. PerS Post authorApril 13, 2012 at 9:15 am
  
  Takk Jonathan :)
  
  Reply ↓
ikemarrus April 18, 2012 at 2:32 pm

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

Reply ↓
1. PerS Post authorApril 18, 2012 at 10:59 pm
  
  Yepp, you are correct. Thank you for notifying me. It’s fixed and a new version is available in the download link above.
  
  Reply ↓
ikemarrus April 18, 2012 at 11:01 pm

That was fast – thanks!

Reply ↓
Luke Watts April 27, 2012 at 1:00 am

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

Reply ↓

Stian Andreassen May 5, 2012 at 2:23 pm

Brilliant plugin! Thanks, Per!

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

Reply ↓

PerS Post authorMay 5, 2012 at 7:28 pm

Selvsagt :)

The following is localized:

wp_localize_script('timepicker', 'timepicker_lang', array(
	'time_text'   => __("Time",'acf'),
	'hour_text'   => __("Hour",'acf'),
	'minute_text' => __("Minute",'acf'),
	'second_text' => __("Second",'acf')
));

wp_localize_script('timepicker', 'timepicker_lang', array(

'time_text' => __("Time",'acf'),

'hour_text' => __("Hour",'acf'),

'minute_text' => __("Minute",'acf'),

'second_text' => __("Second",'acf')

));

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
		});
	});
});

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

});

Reply ↓

Stian Andreassen May 5, 2012 at 9:07 pm

Hur bra som helst! ;-)

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

Reply ↓
1. PerS Post authorMay 5, 2012 at 11:47 pm
  
  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.
  
  Reply ↓
2. PerS Post authorMay 8, 2012 at 1:10 am
  
  The latest version, supporting localization, is available (got some spare time). Please test
  
  Reply ↓
Jonny May 8, 2012 at 12:22 am

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__).

Reply ↓
1. PerS Post authorMay 8, 2012 at 1:08 am
  
  Agree, I’ll look into it.
  
  Reply ↓
2. PerS Post authorMay 8, 2012 at 2:24 am
  
  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 ;)
  
  Reply ↓
  1. Jonny May 11, 2012 at 1:51 am
    
    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.
    
    Reply ↓
Su June 22, 2012 at 10:17 pm

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.

Reply ↓
1. PerS Post authorJune 26, 2012 at 1:34 am
  
  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
  
  Reply ↓
  1. Su June 26, 2012 at 1:53 am
    
    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.
    
    Reply ↓
    1. PerS Post authorJune 26, 2012 at 10:29 am
      
      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).
      
      Reply ↓
Brent July 25, 2012 at 10:23 pm

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.

Reply ↓
Rachel Morrissey September 7, 2012 at 2:21 pm

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

Reply ↓
1. PerS Post authorSeptember 8, 2012 at 1:28 pm
  
  Please see the comment above, with my suggestions. Maybe you have the same problem?
  
  Reply ↓
alan colyer September 19, 2012 at 11:11 am

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

Reply ↓
credos September 26, 2012 at 9:31 pm

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

Reply ↓
PerS Post authorSeptember 26, 2012 at 9:36 pm

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

Reply ↓
zander October 15, 2012 at 8:11 pm

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?

Reply ↓
zander October 15, 2012 at 8:16 pm

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

Reply ↓
zander October 15, 2012 at 8:17 pm

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

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

Thanks

Reply ↓
1. PerS Post authorOctober 16, 2012 at 8:57 am
  
  You can set the time format, eg: hh:mm:ss
  
  Reply ↓
Sascha October 16, 2012 at 6:50 pm

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?

Reply ↓
1. PerS Post authorOctober 16, 2012 at 9:07 pm
  
  Sascha, view the source, in the browser, and see if the url to the javascript files are correct.
  
  Reply ↓
  1. Sascha October 16, 2012 at 11:12 pm
    
    The javascript files are not included. Only the CSS files. The url to the css files are correct.
    
    Reply ↓
    1. PerS Post authorOctober 16, 2012 at 11:15 pm
      
      What’s the WordPress and PHP versions you are running ?
      
      Reply ↓
      1. Sascha October 16, 2012 at 11:36 pm
        
        WP 3.4 und PHP 5.2 Fast CGI
Sascha October 17, 2012 at 4:51 am

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

Reply ↓
1. PerS Post authorOctober 17, 2012 at 7:54 am
  
  Excellent, you had me worried. You’re the only one that’s reported this “bug”. What’s the name of the other plugin ?
  
  Reply ↓
Sascha October 17, 2012 at 2:58 pm

The name of the plugin is Custom Field Suite

Reply ↓
1. PerS Post authorOctober 17, 2012 at 9:31 pm
  
  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.
  
  Reply ↓
Dot Red October 31, 2012 at 6:55 pm

Great work, thanks for the plugin really useful.

Reply ↓
Bartosz November 6, 2012 at 1:20 pm

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.

Reply ↓
PerS Post authorNovember 6, 2012 at 9:20 pm

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

Reply ↓

TheWalker November 7, 2012 at 1:34 am

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:

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;		
}

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;

}

Reply ↓

PerS Post authorNovember 7, 2012 at 2:02 am

Nice job, and you are free to modify as you wish. You should also have a look at the modification done by Luke

Reply ↓

niek November 16, 2012 at 3:10 pm

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!

Reply ↓
1. PerS Post authorNovember 16, 2012 at 3:29 pm
  
  When you define the field, set the date format as “d MM yy”
  
  Reply ↓
  1. niek November 16, 2012 at 3:35 pm
    
    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… ?
    
    Reply ↓
    1. PerS Post authorNovember 16, 2012 at 3:53 pm
      
      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.
      
      Reply ↓
Carl Wilhelm November 17, 2012 at 1:32 am

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?

Reply ↓
1. PerS Post authorNovember 17, 2012 at 1:38 am
  
  Looks like you have an error in arthemia/functions.php where you include the time picker field. Please post what you added.
  
  Reply ↓
Carl Wilhelm November 17, 2012 at 3:04 pm

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.

Reply ↓
Carl Wilhelm November 29, 2012 at 10:05 am

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?

Reply ↓
1. PerS November 29, 2012 at 8:25 pm
  
  It’s most likly a plugin (w/jquery ui) thats causing this. You can use firebug to check the style used for the arrows.
  
  Reply ↓
  1. Szymon Skulimowski January 20, 2013 at 11:27 am
    
    Thats right but this plugin is “Advanced Custom Fields” :)
    http://i.imgur.com/G1zQWV4.png
    
    You should simple add this line into acf_time_picker/css/jquery-ui-timepicker-addon.css:
    
    CSS
    
    .ui-acf .ui-datepicker .ui-datepicker-prev, .ui-acf .ui-datepicker .ui-datepicker-next { display: block; }
    
    1
    2
    3
    
    .ui-acf .ui-datepicker .ui-datepicker-prev, .ui-acf .ui-datepicker .ui-datepicker-next {
    display: block;
    }
    
    Reply ↓
Alicia St Rose December 1, 2012 at 4:15 am

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…

Reply ↓
1. PerS Post authorDecember 1, 2012 at 11:50 am
  
  Hi Alicia,
  Please read the comments above and see if you can find the answer on how to fix it there.
  
  Reply ↓
Alicia St Rose December 1, 2012 at 3:56 pm

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!

Reply ↓
David Mosterd January 7, 2013 at 4:56 pm

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

Reply ↓
David Mosterd January 7, 2013 at 5:00 pm

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 ;)

Reply ↓
eaglejohn February 27, 2013 at 2:31 pm

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?

Reply ↓
1. PerS Post authorFebruary 28, 2013 at 5:22 pm
  
  Thank you for telling me. I haven’t tested it myself with 4.0 (since it’s still in beta), but will have a look this week-end.
  
  Reply ↓
  1. eaglejohn March 1, 2013 at 4:28 pm
    
    Elliot (ACF developer) replied to my post on the ACF support forum and he told me he has to fix it because things work different in 4.0 (beta).
    
    Reply ↓
    1. PerS Post authorMarch 19, 2013 at 9:47 pm
      
      Please see https://github.com/soderlind/acf-field-date-time-picker
      
      Reply ↓
ColouRo March 2, 2013 at 3:02 pm

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?

Reply ↓
1. PerS Post authorMarch 2, 2013 at 4:43 pm
  
  ACF version … ?
  
  Reply ↓
Elliot Condon March 6, 2013 at 8:06 am

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

Reply ↓
1. PerS Post authorMarch 6, 2013 at 2:37 pm
  
  Hi Elliot, I’m on a business trip, but will look at ACF v4 this coming week-end. Thank you for offering your help, I’ll bug you only if needed :)
  
  Reply ↓
2. PerS Post authorMarch 19, 2013 at 9:46 pm
  
  For ACF4, please see https://github.com/soderlind/acf-field-date-time-picker
  
  Reply ↓
John Snow March 6, 2013 at 1:33 pm

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.

Reply ↓
QLStudio March 18, 2013 at 12:40 am

Hey,

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

Reply ↓
1. PerS Post authorMarch 18, 2013 at 7:23 am
  
  Sure, just moved my site and forgot to move the download folder. Thanks for reminding me :)
  
  The file is available now at: http://soderlind.no/download/acf_time_picker.zip
  
  Reply ↓
QLStudio March 18, 2013 at 11:56 am

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

Reply ↓
Tim Wood April 1, 2013 at 11:17 pm

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?

Reply ↓
1. PerS Post authorApril 2, 2013 at 5:48 am
  
  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.
  
  Reply ↓
2. PerS Post authorApril 5, 2013 at 1:17 pm
  
  Check out the latest version. It allows you to select between slider or dropdown.
  
  Reply ↓

Enrique May 14, 2013 at 9:56 am

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

//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);

//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);

Reply ↓

Per Søderlind

I code for fun

Date and Time Picker field for Advanced Custom Fields

Changlog

Latest version

Prerequisite

Installation

Create a Date and Time Picker field

Retrieving Time Picker values

Localization

Debugging

Credit

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

Leave a Reply Cancel reply