I created a custom post type with a couple of fields where the user can enter the start date and the end date for a project.

I am trying to implement the jQuery datepicker but nothing happens when I click on the input fields using 1.7.3; if I use 1.8 it throws an error $(input).zIndex is not a function


Here is the function

  function webfolio_show_timespan_box(){
  <script type="text/javascript" src="<?php bloginfo('stylesheet_directory')?>/js/jquery.ui-core.js"></script>
  <script type="text/javascript" src="<?php bloginfo('stylesheet_directory')?>/js/jquery.picker.min.js"></script>
  <link type="text/css" rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/css/smoothness/jquery.custom.css" />
   jQuery(function() {
    jQuery( ".datepicker" ).datepicker();
    global $timespan_box, $post, $prefix;

    echo '<input type="hidden" name="webfolio_meta_box_nonce" value="',    wp_create_nonce(basename(__FILE__)), '" />';

     echo '<table class="form-table">';

     foreach ($timespan_box['fields'] as $field) {
        // get current post meta data
        $meta = get_post_meta($post->ID, $field['id'], true);

        echo '<tr style="border:1px solid #e3e3e3;">',
            '<th style="width:20%; font-weight:bold;"><label for="', $field['id'], '">', $field['name'], '</label></th>',
        echo '<input class="datepicker" type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $meta ? $meta : $field['std'], '" size="30" style="width:20%" />', '<br />', $field['desc'];
        echo '<td></tr>';

    echo '</table>';

Thank you for your help

  • can you see the scripts being included? and also what is you input tag like?
    – Bainternet
    Mar 15, 2011 at 17:55
  • I added the whole function, the scripts are loaded correctly. Mar 15, 2011 at 22:16

1 Answer 1


maybe you include your scripts ui-core and picker too early. Use wp_enqueue script() to include on the right hook. You must not include ui-core, only datepicker!


wp_enqueue_script( 'jquery-ui-datetimepicker', \
  $this->get_plugins_url( 'js/ui.datetimepicker.js', __FILE__ ), \
  array('jquery-ui-core') , 0.1, TRUE );`

any tutorials:

I use the datepicker on different plugins and works fine, but it is necessary, that the order is correctly.

  • I did like you said, but I had not to load the css theme file to make it work. Probably there were some zindex properties conflicting...;) Mar 16, 2011 at 10:44
  • for the css it is also possible to use the function wp_enqueue_style() and then worls also the css file.
    – bueltge
    Mar 16, 2011 at 22:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.