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

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

サンプル・プログラム

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

サンプル・プログラムの解説:jQueryの準備

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

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

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

0095: /**
0096:  * jQuery:Datepicker 用の祝日スクリプトを作成する
0097:  * @param pahooCalendar $pc  暦計算クラス
0098:  * @param int $start   開始年
0099:  * @param int $finish  終了年
0100:  * @param string $ymd  初期値;省略可能
0101:  * @return string スクリプト
0102: */
0103: function makeJSDatepicker($pc$start$finish$ymd='') {
0104: $js =<<< EOD
0105: $(function() {
0106:   //カレンダーの範囲
0107:   var minD = new Date({$start}, 0, 1);
0108:   var maxD = new Date({$finish}, 11, 31);
0109: 
0110: var holidays = {
0111: 
0112: EOD;
0113:     $cnt = 0;
0114:     for ($year = $start$year <= $finish$year++) {
0115:         for ($month = 1; $month <= 12; $month++) {
0116:             $day_of_month = $pc->getDaysInMonth($year$month);
0117:             for ($day = 1; $day <= $day_of_month$day++) {
0118:                 $name = $pc->getHoliday($year$month$day);
0119:                 if ($name != FALSE) {
0120:                     $yyyymmdd = sprintf('%04d%02d%02d', $year$month$day);
0121:                     if ($cnt > 0)   $js .= ",\n";
0122: $js .= <<< EOD
0123: "{$yyyymmdd}":{type:0, title:"{$name}"}
0124: EOD;
0125:                 $cnt++;
0126:                 }
0127:             }
0128:         }
0129:     }
0130: 
0131: $js .=<<< EOD
0132: 
0133: };
0134: 
0135:     //Datepickerの設定
0136:     $(".datepicker").datepicker({
0137:         dateFormat: "yy/mm/dd",
0138:         minDate: minD,
0139:         maxDate: maxD,
0140:         beforeShowDay: function(day) {
0141:             var result;
0142:             var holiday = holidays[$.datepicker.formatDate('yymmdd', day)]
0143:             // 祝日・非営業日定義に存在するか?
0144:             if (holiday) {
0145:                 result =  [true, "date-holiday" + holiday.type, holiday.title];
0146:             } else {
0147:                 switch (day.getDay()) {
0148:                     case 0: // 日曜日か?
0149:                         result = [true, "date-sunday"];
0150:                         break;
0151:                     case 6: // 土曜日か?
0152:                         result = [true, "date-saturday"];
0153:                         break;
0154:                     default:
0155:                         result = [true, ""];
0156:                         break;
0157:                 }
0158:             }
0159:             return result;
0160:         }
0161:     });
0162:     $(".datepicker").datepicker("setDate", "{$ymd}");
0163: });
0164: 
0165: EOD;
0166: 
0167:     return $js;
0168: }

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

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

参考サイト

(この項おわり)
header