Timepicker-addon doesn’t show – Datepicker works fine?

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?

Read More

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.

Related posts

Leave a Reply

1 comment

  1. 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');