Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

UPDATE It seems that it might be a problem with the,

  $("#opening_time").datetimepicker();
  $("#opening_time_end").timepicker();
  $("#closing_time_end").timepicker();

If there is a datetimepicker call before a timepicker then the timepicker doesn't work. I do not understand since I have the datepicker working and everything is included in the same way. What am I missing?

Succesfully added the jQuery UI Datepicker and even added a time picker for just time meta_box fields. I have been trying to ad Trent Richardson's Timepicker-addon and I can not get it to show up.

Here is the wp-enqueue in functions.php.

      /**
   * Adds a jQuery datepicker script to Event pages.
   * http://jqueryui.com/demos/datepicker/
   */
  function pbd_events_jquery_datepicker() {
      wp_enqueue_script(
          'jquery-ui-datepicker',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/jquery-ui-1.8.16.custom.min.js',
          array('jquery')
      );
          wp_enqueue_script(
          'jquery-ui-timepicker',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/jquery.ui.timepicker.js',
          array('jquery')
      );
      wp_enqueue_script(
          'jquery-ui-timepicker-addon',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/jquery.ui.timepicker-addon.js',
          array('jquery')
      );

      wp_enqueue_script(
          'pbd-datepicker',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/pbd-datepicker.js',
          array('jquery', 'jquery-ui-datepicker', 'jquery-ui-timepicker', 'jquery-ui-timepicker-addon')
      );
  }
  add_action('admin_print_scripts-post-new.php', 'pbd_events_jquery_datepicker');
  add_action('admin_print_scripts-post.php', 'pbd_events_jquery_datepicker');

  /**
   * Adds CSS for the jQuery datepicker script to Event pages.
   * http://jqueryui.com/demos/datepicker/
   */
  function pbd_events_jquery_datepicker_css() {
      wp_enqueue_style(
          'jquery-ui-datepicker',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/css/smoothness/jquery-ui-1.8.16.custom.css'
      );
      wp_enqueue_style(
          'jquery-ui-timepicker',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/css/jquery.ui.timepicker.css'
      );
      wp_enqueue_style(
          'jquery-ui-timepicker-addon',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/css/jquery.ui.timepicker-addon.css'
      );
  }
  add_action('admin_print_styles-post-new.php', 'pbd_events_jquery_datepicker_css');
  add_action('admin_print_styles-post.php', 'pbd_events_jquery_datepicker_css');

Here is the function call in pbd-datepicker that is added in the wp-enqueue.

      jQuery(function($) {
      $( "#start_date" ).datepicker({ dateFormat: 'yy/mm/dd', numberOfMonths: 2, minDate: 0 });
      $( "#end_date" ).datepicker({ dateFormat: 'yy/mm/dd', numberOfMonths: 4 });               

      $("#opening_time").datetimepicker();

      $("#opening_time_end").timepicker();
      $("#closing_time_end").timepicker();
      $("#artist_talk_time_end").timepicker();
      $("#lecture_time_end").timepicker();
      $("#panel_time_end").timepicker();
      $("#special_event_time_end").timepicker();
      $("#workshop_time_end").datetimepicker();
  });

The input field ids are accurate. I have checked and double-checked typos. Why would the first two scripts, jquery.ui.timepicker.js and datepicker work but not jquery.ui.timepicker-addon.js??

Am I calling the js wrong?

Thank you in advance.

share|improve this question
add comment

1 Answer 1

up vote 2 down vote accepted

Figured out that I needed to have the right js dependencies declared. This code now works. Hope it helps someone else with the same problem.

Key line array('jquery-ui-core' ,'jquery-ui-datepicker', 'jquery-ui-slider')

Full `wp-enqueue' code:

      function pbd_events_jquery_datepicker() {
    wp_enqueue_script(
          'jquery-ui-datepicker',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/jquery-ui-1.8.16.custom.min.js',
          array('jquery')
      );

        wp_enqueue_script(
          'jquery-ui-timepicker-addon',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/jquery-ui-timepicker-addon.js',
          array('jquery-ui-core' ,'jquery-ui-datepicker', 'jquery-ui-slider')
      );

      wp_enqueue_script(
          'pbd-datepicker',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/pbd-datepicker.js',
          array('jquery', 'jquery-ui-datepicker' , 'jquery-ui-timepicker-addon')
      );
  }
  add_action('admin_print_scripts-post-new.php', 'pbd_events_jquery_datepicker');
  add_action('admin_print_scripts-post.php', 'pbd_events_jquery_datepicker');

  /**
   * Adds CSS for the jQuery datepicker script to Event pages.
   * http://jqueryui.com/demos/datepicker/
   */
  function pbd_events_jquery_datepicker_css() {
      wp_enqueue_style(
          'jquery-ui-datepicker',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/css/smoothness/jquery-ui-1.8.16.custom.css'
      );
      wp_enqueue_style(
          'jquery-ui-timepicker-addon',
          get_bloginfo('template_directory') . '/jquery-ui-datepicker/css/jquery-ui-timepicker-addon.css'
      );
  }
  add_action('admin_print_styles-post-new.php', 'pbd_events_jquery_datepicker_css');
  add_action('admin_print_styles-post.php', 'pbd_events_jquery_datepicker_css');
share|improve this answer
    
Cool One-Liner: array('jquery-ui-core' ,'jquery-ui-datepicker', 'jquery-ui-slider') –  José Pablo Orozco Marín Jun 29 '12 at 7:41
    
Thank you for documenting this working solution. Works fine using wp_register_script and then wp_enqueue_script too. –  Dominor Novus Feb 12 '13 at 13:00
add comment

Your Answer

 
discard

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.