WordPress管理画面でDatepickerを使う

プラグインを作成してWordPressの管理画面に追加したページで、日付入力フィールドにjQueryのDatepickerを使いたい。

プラグインフォルダに追加して自分で登録しようと思っていたら、そもそもWordPressではjQueryを使っているので、わざわざそんなことをしなくていいらしい。

まず、wp-includes/script-loader.php で使いたいスクリプトの登録名を確認する。
Datepicker なら、'jquery-ui-datepicker' となっている。

プラグインで管理画面に追加したページだけでスクリプトを読み込む場合は、以下のようにする。

add_action('admin_menu', 'add_dashboard');

function add_dashboard() {
    $hook_suffix = add_submenu_page( $parent_slug, $page_title, $menu_title, $capability,    $menu_slug, $function );
    add_action("admin_print_scripts-".$hook_suffix , 'my_plugin_admin_scripts');
    add_action("admin_head-".$hook_suffix , 'my_plugin_admin_css');
}

// 使用したいスクリプトを読み込む
function my_plugin_admin_scripts() {
    wp_enqueue_script('jquery-ui-datepicker');
}

// スクリプトで使用するCSSを読み込む
function my_plugin_admin_css() {
　　wp_enqueue_style( 'my_plugin_admin-style', $plugin_url . '/my_plugin_admin.css' );

}

Datepicker のスタイルについては、ThemeRoller から別途ダウンロードして、上記my_plugin_admin.css のように読み込む。

たまにしか使わないので、日付書式の設定と初期値の設定方法もメモ
<script>
jQuery(document).ready(function($) {
    $('.term-datepicker').datepicker();
    $('.term-datepicker').datepicker("option", "dateFormat", "yy/mm/dd");
<?php if(isset($search["term"])) :?>
    $(".term-datepicker").datepicker("setDate", "<?php echo $search["term"];?>");
<?php endif;?>
});
</script>