2016年3月30日水曜日

WordPressでDatepickerを使う

最近のブラウザ(モダンブラウザ)は、type="date"のinputタグでDatepickerの機能が働くので、調子に乗っていると、IEではただのテキストボックスになっていて、後で慌てることになる。

そんなうっかりさんのために、以下のスニペットを記録しておく。

if (!Modernizr.inputtypes.date) {
    jQuery(function($) {
        $('input[type=date]').datepicker({
            dateFormat: 'yy-mm-dd'
        });
    });
}

Modernizrについては、modernizr.comを参照のこと。

おっと、functions.phpに以下のような記述をして必要なファイルを配置するのを忘れないで。

if( is_page('対応が必要なページ') ) {
wp_enqueue_script ('modernizr', esc_url( get_template_directory_uri() ).'/js/modernizr.js', array('jquery'));
wp_enqueue_script ('jquery-ui-datepicker');
wp_enqueue_style( 'jquery-ui-style', esc_url( get_template_directory_uri() ) . '/css/jquery-ui/jquery-ui.min.css' );
wp_enqueue_style( 'jquery-ui-theme', esc_url( get_template_directory_uri() ) . '/css/jquery-ui/jquery-ui.theme.min.css' );
}
以上