WordPressの投稿画面に一気にjQuery UI Datepickerを組み込む

harada 143views 更新:2016年4月4日

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'); ?>
 <script type="text/javascript">
    jQuery(document).ready(function ($) {
      $('.date-input').datepicker ({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        yearRange: '-10:+10'
      });
      $('.date-input').attr('placeholder', '日付を選択してください');
    });
  </script>
}

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

参考: Use WordPress default jQuery UI “datepicker” in your theme
jquery UI datepicker の基本vol1 – 設置方法から日本語化対応など

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

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

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