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

Update:

Here is the function

  function webfolio_show_timespan_box(){
  ?>
  <script type="text/javascript" src="https://wordpress.stackexchange.com/questions/12131/<?php bloginfo("stylesheet_directory')?>/js/jquery.ui-core.js"></script>
  <script type="text/javascript" src="https://wordpress.stackexchange.com/questions/12131/<?php bloginfo("stylesheet_directory')?>/js/jquery.picker.min.js"></script>
  <link type="text/css" rel="stylesheet" href="https://wordpress.stackexchange.com/questions/12131/<?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

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!

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:

  • http://wpengineer.com/415/use-javascript-libraries-in-and-of-wordpress/
  • http://codex.wordpress.org/Function_Reference/wp_enqueue_script
  • http://wpengineer.com/2028/small-tips-using-wordpress-and-jquery/

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

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *