Add jQuery UI datepicker to admin panel

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

Read More

Update:

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" />
  <script>
   jQuery(function() {
    jQuery( ".datepicker" ).datepicker();
   });
    </script>
    <?php
    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>',
            '<td>';
        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

Related posts

Leave a Reply

1 comment

  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!

    example:

    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.