jQuery UI Datepicker not working

by

i want to add a datepicker on a custom page but i doesn not work. WP version is 3.2.1.
Those are the init string i used on wp code:

wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker', get_bloginfo('template_url') . '/js/jquery-ui-datepicker.min.js', array('jquery','jquery-ui-core'));
wp_enqueue_style('jquery.ui.theme', get_bloginfo('template_url') . '/js/smoothness/jquery-ui-1.8.16.custom.css');

Those enqueques generate this code:

<script type="text/javascript" src="http://www.xxxxxxxx.it/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script>
<script type="text/javascript" src="http://www.xxxxxxxx.it/wp-includes/js/jquery/ui.core.js?ver=1.8.12"></script>
<script type="text/javascript" src="http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/jquery-ui-datepicker.min.js?ver=3.2.1"></script>
<link rel="stylesheet" id='jquery.ui.theme-css'  href="http://www.xxxxxxxx.it/wp-content/themes/greyzed/js/smoothness/jquery-ui-1.8.16.custom.css?ver=3.2.1" type="text/css" media="all" />

On the page body, i use this code:

<script type="text/javascript">
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
</script>
<div class="row"><label for="day">Data</label><input type="text" id="datepicker" name="day" class="text" /></div>

The datepicker does not work. I do not know how to debug this issue. It does nothing, like the jQuery is not even there.

UPDATE:

With your help i managed to debug the code. I placed the script after the div and changed into:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});
</script>

This code give me error when calling the datepicker method, the error states:

Uncaught TypeError: Object [object Object] has no method 'datepicker'

If i type jQuery(‘#datepicker’) on javascript console, i get this:

[<input type=​"text" id=​"datepicker" name=​"day" class=​"text">​]

I get no other errors except for that one, all the references to jQuery seems to work fine.

UPDATE 2:

Finally i got it working! i had to place ‘wp_print_scripts’ instead of ‘init’, and i had to reposition some init code of another plugin that was conflicting. The only remaining issue are the themes… if i use the basic theme within googlecode, it works. If i use other themes (embedded in wp or linked with wp_enqueque_style) the theme will be not loaded…. if i check the generated html, there is no sign of the line that should load the jQuery theme.

4 Answers
4

I often type things wrong. So, I would start debugging you copying and pasting the links to the JS scripts in your browser and make sure they load.

Then in Chrome go to the Wrench Menu -> Tools -> JavaScript Console. Here you will be able to type/execute your JavaScript directly. I would start off my typing jQuery into the console to make sure jQuery is actually loaded. Then try doing jQuery('#datepicker') if it returns empty brackets [] then your selector is failing. If it works, try opening up the datepicker – you will probably see an error in the JS console.

Like others have suggested, I think the problem is that the script is running before the is actually rendered. I would suggest doing the following:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
});
</script>

This will force the script to run after the entire page has loaded.

== EXAMPLE ==

add_action( 'init', 'wp29r01_date_picker' );
function wp29r01_date_picker() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-datepicker', 'http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js', array('jquery', 'jquery-ui-core' ) );
}

add_action( 'wp_footer', 'wp29r01_print_scripts');
function wp29r01_print_scripts() {
    ?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#datepicker').datepicker();
    })
</script>
    <?php
}

Leave a Comment