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

(1/1)
jQuery UI:Datepicker を利用すると、カレンダーから日付を選択・入力することができる。ところが、このライブラリは祝日をサポートしていない。
そこで、「PHP で祝日を求める」で作った祝日計算プログラムを使い、PHP 側で祝日を計算し、Datepicker に表示するようにする。

(2020 年 1 月 2 日)2020 年(令和 2 年)の祝日変更に対応した。
PHPで日付入力(カレンダーから選択)

サンプル・プログラム

圧縮ファイルの内容
tide.phpサンプル・プログラム本体。
pahooCalendar.php暦計算クラス pahooCalendar。
暦計算クラスの使い方は「PHPで日出没・月出没・月齢・潮を計算」を参照ください。include_pathが通ったディレクトリに配置してください。

解説:jQueryの準備

0033: /**
0034:  * 共通HTMLヘッダ
0035:  * @global string $HtmlHeader
0036: */
0037: $encode = INTERNAL_ENCODING;
0038: $title  = TITLE;
0039: $HtmlHeader =<<< EOD
0040: <!DOCTYPE html>
0041: <html lang="ja">
0042: <head>
0043: <meta charset="{$encode}">
0044: <title>{$title}</title>
0045: <meta name="author" content="studio pahoo" />
0046: <meta name="copyright" content="studio pahoo" />
0047: <meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />
0048: <meta http-equiv="pragma" content="no-cache">
0049: <meta http-equiv="cache-control" content="no-cache">
0050: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
0051: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
0052: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
0053: <link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
0054: <style type="text/css">
0055: .date-sunday    .ui-state-default {
0056:     background-image: none;
0057:     background-color: #FF0000;
0058:     color: #FFFFFF;
0059: }
0060: .date-saturday    .ui-state-default {
0061:     background-image: none;
0062:     background-color: #0000FF;
0063:     color: #FFFFFF;
0064: }
0065: .date-holiday0    .ui-state-default {
0066:     background-image: none;
0067:     background-color: #FF6666;
0068:     color: #FFFFFF;
0069: }
0070: .date-holiday1    .ui-state-default {
0071:     background-image: none;
0072:     background-color: #FFCCCC;
0073:     color: #000088;
0074: }
0075: </style>
0076: 
0077: EOD;

使用する jQuery 系ライブラリは次の通り。これらは Google が用意しているものを呼び出すことにする。
  • jQuery 1.6.2
  • jQuery UI 1.8.16
  • Datepicker

解説:祝日スクリプト

0132: /**
0133:  * jQuery:Datepicker 用の祝日スクリプトを作成する
0134:  * @param pahooCalendar $pc  暦計算クラス
0135:  * @param int $start   開始年
0136:  * @param int $finish  終了年
0137:  * @param string $ymd  初期値;省略可能
0138:  * @return string スクリプト
0139: */
0140: function makeJSDatepicker($pc$start$finish$ymd='') {
0141: $js =<<< EOD
0142: $(function() {
0143:   //カレンダーの範囲
0144:   var minD = new Date({$start}, 0, 1);
0145:   var maxD = new Date({$finish}, 11, 31);
0146: 
0147: var holidays = {
0148: 
0149: EOD;
0150:     $cnt = 0;
0151:     for ($year = $start$year <= $finish$year++) {
0152:         for ($month = 1; $month <= 12; $month++) {
0153:             $day_of_month = $pc->getDaysInMonth($year$month);
0154:             for ($day = 1; $day <= $day_of_month$day++) {
0155:                 $name = $pc->getHoliday($year$month$day);
0156:                 if ($name != FALSE) {
0157:                     $yyyymmdd = sprintf('%04d%02d%02d', $year$month$day);
0158:                     if ($cnt > 0)   $js .= ",\n";
0159: $js .= <<< EOD
0160: "{$yyyymmdd}":{type:0, title:"{$name}"}
0161: EOD;
0162:                 $cnt++;
0163:                 }
0164:             }
0165:         }
0166:     }
0167: 
0168: $js .=<<< EOD
0169: 
0170: };
0171: 
0172:     //Datepickerの設定
0173:     $(".datepicker").datepicker({
0174:         dateFormat: "yy/mm/dd",
0175:         minDate: minD,
0176:         maxDate: maxD,
0177:         beforeShowDay: function(day) {
0178:             var result;
0179:             var holiday = holidays[$.datepicker.formatDate('yymmdd', day)]
0180:             // 祝日・非営業日定義に存在するか?
0181:             if (holiday) {
0182:                 result =  [true, "date-holiday" + holiday.type, holiday.title];
0183:             } else {
0184:                 switch (day.getDay()) {
0185:                     case 0: // 日曜日か?
0186:                         result = [true, "date-sunday"];
0187:                         break;
0188:                     case 6: // 土曜日か?
0189:                         result = [true, "date-saturday"];
0190:                         break;
0191:                     default:
0192:                         result = [true, ""];
0193:                         break;
0194:                 }
0195:             }
0196:             return result;
0197:         }
0198:     });
0199:     $(".datepicker").datepicker("setDate", "{$ymd}");
0200: });
0201: 
0202: EOD;
0203: 
0204:     return $js;
0205: }

JavaScript の配列 holiday にあらかじめ祝日を用意しておき、それを Datepicker に渡す。祝日の用意は、「PHP で祝日を求める」で作ったユーザー関数 getHoliday をそのまま利用する。

Datepicker は、1 日分を表示する前に beforeShowDay を呼び出すので、ここに祝日テーブルを参照し、祝日であれば色を変え、祝日名をツールチップ名に表示するようにした。ついでに、土日の色も変えるようにした。

参考サイト

(この項おわり)
header