PHPで日付入力:カレンダーから選択(WebAPI版)

(1/1)
jQuery UI:Datepicker を利用すると、カレンダーから日付を選択・入力することができる。ところが、このライブラリは祝日をサポートしていない。
PHP で日付入力:カレンダーから選択」では、「PHP で祝日を求める」で作った祝日計算プログラムを使い、PHP 側で祝日を計算し、Datepicker に表示した。
しかし、「秋分の日と敬老の日の微妙な関係」で紹介したように、計算で求めた祝日は不完全である。
そこで今回は、WebAPI「曜日・祝日計算サービス」(農研機構)を利用し、祝日を表示するようにしてみる。

当サイトの今後について」に記載されいるように、2016 年(平成 28 年)4 月、「曜日・祝日計算サービス」は廃止された。現在、このプログラムは正常に動作しない。
PHPで日付入力(カレンダーから選択)

サンプル・プログラム

曜日・祝日計算サービス

曜日・祝日計算サービス」(農研機構)は、入力パラメータ(IN)は GET 渡しで、出力結果(OUT)は XML, JSON, PHP のいずれかの形式で戻る。今回使う入力パラメータと出力結果(JSON)のデータ構造を以下に示す。
WebAPIのURL
URL
http://www.finds.jp/ws/calendar.php

入力パラメータ
項目名 フィールド名 内  容
JSONP jsonp string 応答文書をJSONP形式にする場合に指定する。値を指定しない場合はJSON形式を返却する。
JSON json string 応答文書をJSON形式にする場合に指定する。どのような値を指定しても、また値を指定しなくてもよい。
PHP php string 応答文書をPHPシリアル化形式にする場合に指定する。どのような値を指定しても、また値を指定しなくてもよい。
西暦年 y int 西暦年【必須】
m int 月【必須】
日付リストのタイプ t int t=a:全ての日付のリストを応答文書に含める。【デフォルト】
t=h:祝日等のみのリストを応答文書に含める。
祝日等のレベル l int l=1:祝日のみ。
l=2:振り替え休日を含む。
l=3:国民の休日および振り替え休日を含む。
l=0 または lの指定なし:全祝日レベル(平日htype=0は除く)を祝日とする。【デフォルト】
言語 lc string デフォルトは日本語。
lc=en:hname要素の実体を英語で記述する。hkana要素は出現しない。
応答データ構造(json) result year 西暦年 month firstwday 月初の曜日のコード(1:日曜,...7:土曜) days 月の日数 day mday 日付 wday 曜日コード(1:日曜,...7:土曜) htype 祝日タイプ(0:祝日等ではない, 1:祝日, 2:振替休日, 3:国民の休日, 9:その他休日) hname 祝日名 hkana 祝日よみ

サンプル・プログラムの解説:祝日スクリプト

0091: /**
0092:  * jQuery:Datepicker 用の祝日スクリプトを作成する
0093:  * @param int $start   開始年
0094:  * @param int $finish  終了年
0095:  * @return string HTML BODY
0096: */
0097: function makeJavaScript($start$finish) {
0098: $js =<<< EOD
0099: /* 
0100:  * 祝日テーブル
0101:  * "yyyyMMdd":{type:?, title:"休日の名前"}
0102:  */
0103:     var holidays = {};
0104: 
0105: //指定年月の祝日を取得
0106: function searchHoliday(year, month) {
0107:     url = "http://www.finds.jp/ws/calendar.php?json&t=h&y=" + year + "&m=" + month;
0108:     $.getJSON(url, function(json) {
0109:         if (json.error) {
0110:             alert(json.error);
0111:         } else {
0112:             for (i = 0; i < json.result.day.length; i++) {
0113:                 yyyy  = "0000" + String(year);
0114:                 mm    = "00" + String(month);
0115:                 dd    = "00" + String(json.result.day[i].mday);
0116:                 yyyymmdd = yyyy.substr(-4) + mm.substr(-2) + dd.substr(-2);
0117:                 holidays[yyyymmdd] = {};
0118:                 holidays[yyyymmdd]["type"] = 0;
0119:                 holidays[yyyymmdd]["title"] = json.result.day[i].hname;
0120:             }
0121:         }
0122:     });
0123: }
0124: 
0125: $(function() {
0126:     //カレンダーの範囲
0127:     var minD = new Date({$start},0,1);
0128:     var maxD = new Date({$finish},11,31);
0129: 
0130:     //Datepickerの設定
0131:     $(".datepicker").datepicker({
0132:         dateFormat: "yy/mm/dd",
0133:         minDate: minD,
0134:         maxDate: maxD,
0135:         beforeShow: function(input, inst) {
0136:             var dt = new Date();
0137:             searchHoliday(dt.getFullYear(), dt.getMonth() + 1);
0138:         },
0139:         onChangeMonthYear: function(year, month) {
0140:             searchHoliday(year, month);
0141:         },
0142:         beforeShowDay: function(day) {
0143:             var result;
0144:             var holiday = holidays[$.datepicker.formatDate('yymmdd', day)]
0145:             // 祝日・非営業日定義に存在するか?
0146:             if (holiday) {
0147:                 result =  [true, "date-holiday" + holiday.type, holiday.title];
0148:             } else {
0149:                 switch (day.getDay()) {
0150:                     case 0: // 日曜日か?
0151:                         result = [true, "date-sunday"];
0152:                         break;
0153:                     case 6: // 土曜日か?
0154:                         result = [true, "date-saturday"];
0155:                         break;
0156:                     default:
0157:                         result = [true, ""];
0158:                         break;
0159:                 }
0160:             }
0161:             return result;
0162:         }
0163:     });
0164: });
0165: 
0166: EOD;
0167: 
0168:     return $js;
0169: }

WebAPI「曜日・祝日計算サービス」からカレンダーの表示まで、すべて jQuery により実装した。

Datepicker は、最初表示前に beforeShowDay を、年月を変更したときに onChangeMonthYear を呼び出すので、その都度、WebAPI をコールして 1 月分の祝日を取得するようにした。(Chrome では正常に動作しないことがある)

参考サイト

(この項おわり)
header