UPDATE
It seems that it might be a problem with the,
$("#opening_time").datetimepicker();
$("#opening_time_end").timepicker();
$("#closing_time_end").timepicker();
If there is a datetimepicker
call before a timepicker
then the timepicker
doesn’t work. I do not understand since I have the datepicker
working and everything is included in the same way. What am I missing?
Succesfully added the jQuery UI Datepicker and even added a time picker for just time meta_box
fields. I have been trying to ad Trent Richardson’s Timepicker-addon and I can not get it to show up.
Here is the wp-enqueue
in functions.php.
/**
* Adds a jQuery datepicker script to Event pages.
* http://jqueryui.com/demos/datepicker/
*/
function pbd_events_jquery_datepicker() {
wp_enqueue_script(
'jquery-ui-datepicker',
get_bloginfo('template_directory') . '/jquery-ui-datepicker/jquery-ui-1.8.16.custom.min.js',
array('jquery')
);
wp_enqueue_script(
'jquery-ui-timepicker',
get_bloginfo('template_directory') . '/jquery-ui-datepicker/jquery.ui.timepicker.js',
array('jquery')
);
wp_enqueue_script(
'jquery-ui-timepicker-addon',
get_bloginfo('template_directory') . '/jquery-ui-datepicker/jquery.ui.timepicker-addon.js',
array('jquery')
);
wp_enqueue_script(
'pbd-datepicker',
get_bloginfo('template_directory') . '/jquery-ui-datepicker/pbd-datepicker.js',
array('jquery', 'jquery-ui-datepicker', 'jquery-ui-timepicker', 'jquery-ui-timepicker-addon')
);
}
add_action('admin_print_scripts-post-new.php', 'pbd_events_jquery_datepicker');
add_action('admin_print_scripts-post.php', 'pbd_events_jquery_datepicker');
/**
* Adds CSS for the jQuery datepicker script to Event pages.
* http://jqueryui.com/demos/datepicker/
*/
function pbd_events_jquery_datepicker_css() {
wp_enqueue_style(
'jquery-ui-datepicker',
get_bloginfo('template_directory') . '/jquery-ui-datepicker/css/smoothness/jquery-ui-1.8.16.custom.css'
);
wp_enqueue_style(
'jquery-ui-timepicker',
get_bloginfo('template_directory') . '/jquery-ui-datepicker/css/jquery.ui.timepicker.css'
);
wp_enqueue_style(
'jquery-ui-timepicker-addon',
get_bloginfo('template_directory') . '/jquery-ui-datepicker/css/jquery.ui.timepicker-addon.css'
);
}
add_action('admin_print_styles-post-new.php', 'pbd_events_jquery_datepicker_css');
add_action('admin_print_styles-post.php', 'pbd_events_jquery_datepicker_css');
Here is the function call in pbd-datepicker that is added in the wp-enqueue
.
jQuery(function($) {
$( "#start_date" ).datepicker({ dateFormat: 'yy/mm/dd', numberOfMonths: 2, minDate: 0 });
$( "#end_date" ).datepicker({ dateFormat: 'yy/mm/dd', numberOfMonths: 4 });
$("#opening_time").datetimepicker();
$("#opening_time_end").timepicker();
$("#closing_time_end").timepicker();
$("#artist_talk_time_end").timepicker();
$("#lecture_time_end").timepicker();
$("#panel_time_end").timepicker();
$("#special_event_time_end").timepicker();
$("#workshop_time_end").datetimepicker();
});
The input field id
s are accurate. I have checked and double-checked typos. Why would the first two scripts, jquery.ui.timepicker.js and datepicker work but not jquery.ui.timepicker-addon.js??
Am I calling the js wrong?
Thank you in advance.
Figured out that I needed to have the right js dependencies declared. This code now works. Hope it helps someone else with the same problem.
Key line
array('jquery-ui-core' ,'jquery-ui-datepicker', 'jquery-ui-slider')
Full `wp-enqueue’ code: