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 – 設置方法から日本語化対応など