web-dev-qa-db-ja.com

Timepicker-addonが表示されない - Datepickerは正常に機能しますか？

_ update _ に問題がある可能性があります。

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

datetimepickerの前にtimepicker呼び出しがあると、timepickerは機能しません。私はdatepickerを動かしているので理解できません、そしてすべてが同じ方法で含まれています。何が足りないの？

JQuery UI Datepickerを正常に追加し、さらにmeta_boxフィールド用のタイムピッカーも追加しました。 Trent RichardsonのTimepicker-addonを宣伝しようとしていますが、表示させることができません。

これはfunctions.phpのwp-enqueueです。

      /**
   * 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');

これがwp-enqueueに追加されたpbd-datepickerの関数呼び出しです。

      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();
  });

入力フィールドidsは正確です。私はタイプミスをチェックし、ダブルチェックしました。最初の2つのスクリプト、jquery.ui.timepicker.jsとdatepickerは機能するのにjquery.ui.timepicker-addon.jsは機能しないのはなぜですか。

私はjsを間違って呼んでいますか？

前もって感謝します。

custom-post-typesjquerymetaboxjquery-ui
2
John Bentwin

正しいjs依存関係を宣言する必要があることがわかりました。このコードは今動作します。それが同じ問題を抱えている誰かに役立つことを願っています。

キーラインarray('jquery-ui-core' ,'jquery-ui-datepicker', 'jquery-ui-slider')

完全な `wp-enqueue 'コード

      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');
2
John Bentwin