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
を指定します。