WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
can you see the scripts being included? and also what is you input tag like? – Bainternet Mar 15 '11 at 17:55
I added the whole function, the scripts are loaded correctly. – Mirko Mar 15 '11 at 22:16
up vote 4 down vote accepted

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.

share|improve this answer
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...;) – Mirko Mar 16 '11 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 '11 at 22:34

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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