デイトピッカー 「Datepicker」で、カレンダーの祝日表示、任意の休日のセット、デフォルトの日付等の設定・表示をする。令和（2019以降）に対応
投稿： 更新：2019/12/01
デイトピッカーのカレンダー表示の際、
カレンダーでの祝日表示や、店舗等での任意の休日など独自にセットしたり、任意の日付での選択をできないようにする等、細かな設定を行ってみます。
日付入力：
上記サンプルで動作の確認ができます。
内閣府から発表された新しい祝日（2019以降の祝日・2020の特例を含む）に対応させました。（2019/12/01 現在）
オリンピックに絡む特例等細かいので、以下を参照してください。
国民の祝日について（内閣府）
※ページの下の方に「平成３１年（２０１９年）及び平成３２年（２０２０年）の「国民の祝日」の一覧があります。
もくじ
1.デイトピッカーの導入と日本語化の準備
Datepickerに必要なjQueryとCSS
・jQuery本体(ワードプレスの場合は必要ありません)
・jQuery UI と jquery-ui.css (ここではCDNを利用)
・datepicker-ja.js 日本語化(公式のGitHubリポジトリより取得)
・祝日判定スクリプト：HolidayChk.js をダウンロード
※以下のサイトのscriptを、新しい休日に対応させています
AddinBox
|
1 2 3 4 5 |
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script src="/js/jquery.ui.datepicker-ja.js"></script> <script src="/js/HolidayChk.js"></script> |
2.Datepickerに祝日の取得と、任意の休日をセットできるようオプションに追加する
Datepicker の祝日と休日の設定
「休日を格納」の部分で、休みにしたい日を追加していきます。
|
1 2 3 4 5 6 |
var holidays = [ '2019/11/13', '2019/12/12', '2020/01/12', '2020/02/12',//必要な分だけ休みにしたい日付を追加 ]; |
サンプルでは、オプション設定で以下のように設定しています。
▼3日後から選択可能にする
|
1 |
minDate: +3, |
▼2ヶ月先の３日後まで選択可能にする
|
1 |
maxDate: +2M +3D', |
以下ソースで、祝日・休日のセット、デフォルトの日付、その他色々な設定を行っています。
※各部分「trueで日付選択可能」「falseで日付選択不可」と記述のある部分を変更することで、日付選択できるかどうかを変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<script> jQuery(function() { // 休日を格納 var holidays = [ '2019/11/13', '2019/12/12', '2020/01/12', '2020/02/12',//必要な分だけ休みにしたい日付を追加 ]; jQuery('#datepicker').datepicker({ //datepickerのオプション設定 minDate: +3,// 例） 3日後から選択可能にする maxDate: '+2M +3D',//2ヶ月先の3日後まで選択可能にする beforeShowDay: function(date) { var result; var ymd = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(); var HName = ktHolidayName(ymd); //祝日のセット if(HName != '') { result = [true, 'date-holiday', HName]; //trueで、祝日の日付選択可能 } else { // 休日のセット for (var i = 0; i < holidays.length; i++) { var htime = Date.parse(holidays[i]); //timeへ変換 var holiday = new Date(); holiday.setTime(htime); // 休日 if (holiday.getYear() == date.getYear() && holiday.getMonth() == date.getMonth() && holiday.getDate() == date.getDate()) { return [false, 'holiday']; //falseで「休日を格納」で追加した日の日付選択不可 } } switch (date.getDay()) {//各曜日のセット case 0: //日曜日 result = [false, 'sunday']; //falseで日曜日の日付選択不可 break; case 6: //土曜日 result = [true, 'saturday']; //falseで土曜日の日付選択不可 break; default: result = [true]; break; } } return result; }, onSelect: function(dateText, inst) { jQuery('#datepicker').val(dateText); } }); jQuery( '#datepicker' ).datepicker( 'option', 'showAnim','slideDown'); jQuery('#datepicker').datepicker('setDate', '+3'); //デフォルトで選択される日付 例）3日後を選択 }); </script> |
その他オプション等は、以下で色々確認ができます。
https://jqueryui.com/datepicker/
3.Datepickerのカレンダーの 土・日祝日の色を変更する
CSSを変更することで、表示されるカレンダー曜日や、祝日の日付の色を変更することができます。
※オプションを設定したscriptのソース[false, ‘sunday’]の形式の部分の、sunday の部分がクラスとして追加されます。
以下は、このページで使用しているスタイルです。日付選択可能かどうかにかかわらず、各色を変更するようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> /* 平日 */ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{ color: rgb(128, 159, 193); background: #f8f8f8; } /* 日付選択可能 */ .date-holiday a.ui-state-default{ background: rgb(255, 243, 226); color: rgb(223, 167, 116); } .saturday a.ui-state-default{ background: rgb(236, 248, 250); color: rgb(98, 179, 253); } .sunday a.ui-state-default{ background: rgb(255, 233, 225); color: rgb(224, 97, 97); } /* 日付選択不可 */ .date-holiday span.ui-state-default{ background: rgb(255, 243, 226); color: rgb(223, 167, 116); } .saturday span.ui-state-default{ background: rgb(236, 248, 250); color: rgb(98, 179, 253); } .sunday span.ui-state-default{ background: rgb(255, 233, 225); color: rgb(224, 97, 97); } </style> |