kdcsライブラリー

入力フォームに日付入力がある場合、Datepickerでカレンダーを表示させ
クリックで入力できるようにする方法

入力フォーム内のhtmlはこちら
idは任意（オプションの設定と合わせる）readonly=”readonly”を指定することで
スマホのキーボード表示させないようにする。typeはtext

<label>日付<input id="calendar" type="text" readonly="readonly"></label>

jQueryとjQuery-UIを使用するのでgoogleからリンク（今回は1.11.1と1.11.4を使用）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

カレンダーを日本語化するために以下をリンク

<script src="<?php bloginfo('template_url'); ?>/js/datepicker-ja.js"></script>

オプションの設定

<script>
$(function() {
$('#calendar').datepicker({
        minDate: '1d', //明日から
        maxDate: '+1m', //1ヶ月後までが選択可能範囲
        dateFormat: 'yy年mm月dd日(D)', //年-月-日(曜日)
beforeShowDay: function(day) {
 var result;
 switch (day.getDay()) {
 
case 3: // 水曜日を選択できないようにする
 result = [false];
 break;
 case 4: // 木曜日を選択できないようにする
 result = [false];
 break;
 default:
 result = [true]; // それ以外は選択できる
 break;
 
}
 return result;
 }
    });
});
</script>

カレンダーのスタイルシート
今回は公式テーマの「redmond」を使用

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >