WordPressの投稿画面にjQuery UI Datepicker + Timepickerを組み込む

harada 233views 更新:2016年6月6日

jQuery UI Datepickerだけでいい場合は以下の記事を参考にしてください。
WordPressの投稿画面に一気にjQuery UI Datepickerを組み込む

Timepickerアドオンは以下からダウンロードできます。
http://trentrichardson.com/examples/timepicker/

functions.phpに以下を追記します。

ダウンロードしたファイルをテーマフォルダ内に置いた場合の記述ですので適宜修正してください。

add_action('admin_head-post.php', 'admin_head_post');
add_action('admin_head-post-new.php', 'admin_head_post');
function town_admin_head_post(){
  wp_enqueue_script('jquery-ui-core');
  wp_enqueue_script('jquery-ui-datepicker');
  wp_enqueue_style('jquery-ui-css', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
  wp_enqueue_script('jquery-ui-js-ja', '//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js');
//Timepickerを追加
  $dir = get_stylesheet_directory_uri();
  wp_enqueue_script('timepicker-addon', $dir . '/js/jquery-ui-timepicker-addon.js');
  wp_enqueue_script('jquery-ui-timepicker-ja', $dir . '/js/jquery-ui-timepicker-ja.js');
  wp_enqueue_style('timepicker-addon',  $dir . '/common/css/jquery-ui-timepicker-addon.css'); ?>
 <script type="text/javascript">
    jQuery(document).ready(function ($) {
      $(".date-input").datetimepicker({
        controlType: 'select',
        oneLine: true,
        timeFormat: 'HH:mm:ss',
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        yearRange: '-10:+10'
      });
      $('.date-input').attr('placeholder', '日付を選択してください');
    });
  </script>
}

カスタムフィールドテンプレートのオプション設定などでdatepickerを利用したいテキストフィールドのclassにdate-inputを指定します。

参考:datepickerとtimepickerを使って入力しやすいフォームを作る

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません