jQuery UI Datepicker not working

2 Views

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:

Read More
<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.

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. 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
}

  2. For those who debug “not working” datepicker – for me it was an issue of my reset css, specifically of this:

    html, body { overflow: auto; }

    My datepicker was alright, but kept appearing on far top of the screen. 🙂

  3. In your example, the jQuery is placed before the ‘datepicker’ div is created. So it won’t do anything. Either place the script block after the ‘row’ div, or use jQuery(document).ready() instead.

  4. Include your custom script also via wp_enqueue_script() and reference the other libs and you dont have no problems with the timeline; your custom script to ask for the libs of datepicker load after all other scripts is ready; works fine and also in feature releases of WP.