CODEWITHSUNDEEP
jquerywordpressjquery-uijquery-ui-datepicker
user1385827
user1385827

Reputation: 335

jQuery UI Timepicker

Im trying to add the jQuery UI timepicker addon to my datepicker function. These are being loaded up in the admin section of my Wordpress Install.

The scripts and stylesheets are loading in the header. My problem is the timepicker function isnt initialising.

The datepicker shows up fine on click. Have I messed up the syntax here somehow?

function my_admin_init() {
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker', get_stylesheet_directory() . 'js/jquery-ui-1.10.1.custom.min.js', array('jquery', 'jquery-ui-core') );
wp_enqueue_script('jquery-ui-datetimepicker', get_stylesheet_directory() . 'js/timepicker.js', array('jquery', 'jquery-ui-core') );
wp_enqueue_style('jquery.ui.theme', get_stylesheet_directory_uri() . '/css/jquery-ui-1.10.1.custom.min.css');
wp_enqueue_style('jquery.timepicker.theme', get_stylesheet_directory_uri() . '/css/timepicker.css');
}
add_action('admin_init', 'my_admin_init');

function my_admin_footer() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#pyre_open').datepicker({
        dateFormat : 'DD, d MM, yy'
    });
    jQuery('#pyre_open').datetimepicker();
});
</script>
<?php
}
add_action('admin_footer', 'my_admin_footer');

Upvotes: 2

Views: 4465

Answers (1)

christoph
christoph

Reputation: 29

I know this one is an old post but maybe someone else is running into this.

First your're not initializing the library right. It is not needed to enqueue the full jquery-ui-core for the datetimepicker. In my functions.php the code looks like:

wp_register_script( "timepicker", get_stylesheet_directory_uri().'/pathTo/jquery-ui-timepicker-addon.min.js', array( 'jquery', 'jquery-ui-datepicker', 'jquery-ui-slider' ), false, true );
...

//and later
wp_enqueue_script( 'timepicker' );
wp_enqueue_script( 'jquery-ui-datepicker' );
wp_enqueue_script( 'jquery-ui-spinner' );

In wp_register_script we refer the included jquery-ui classes to the datetimepicker - see here for a full list Wordpress Reference/wp register script

Second your datetimepicker don't work, because when calling the datetimpicker, the datepicker is loaded and shown already on #pyre_open. Delete the following lines should do the trick or choose another html element for time/datepicker.

jQuery('#pyre_open').datepicker({
    dateFormat : 'DD, d MM, yy'
});

Upvotes: 2

Related Questions