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

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

(2021 年 5 月 5 日)PHP8 対応,リファラチェック改良

サンプル・プログラムの実行例

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

目次

サンプル・プログラム

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

解説:jQueryの準備

0042: /**
0043:  * 共通HTMLヘッダ
0044:  * @global string $HtmlHeader
0045: */
0046: $encode = INTERNAL_ENCODING;
0047: $title  = TITLE;
0048: $width  = WIDTH;
0049: $HtmlHeader =<<< EOT
0050: <!DOCTYPE html>
0051: <html lang="ja">
0052: <head>
0053: <meta charset="{$encode}">
0054: <title>{$title}</title>
0055: <meta name="author" content="studio pahoo" />
0056: <meta name="copyright" content="studio pahoo" />
0057: <meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />
0058: <meta http-equiv="pragma" content="no-cache">
0059: <meta http-equiv="cache-control" content="no-cache">
0060: <meta http-equiv="X-UA-Compatible" content="IE=edge">
0061: <meta name="viewport" content="width={$width},user-scalable=yes" />
0062: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
0063: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
0064: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
0065: <link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
0066: <style type="text/css">
0067: .date-sunday    .ui-state-default {
0068:     background-image: none;
0069:     background-color: #FF0000;
0070:     color: #FFFFFF;
0071: }
0072: .date-saturday    .ui-state-default {
0073:     background-image: none;
0074:     background-color: #0000FF;
0075:     color: #FFFFFF;
0076: }
0077: .date-holiday0    .ui-state-default {
0078:     background-image: none;
0079:     background-color: #FF6666;
0080:     color: #FFFFFF;
0081: }
0082: .date-holiday1    .ui-state-default {
0083:     background-image: none;
0084:     background-color: #FFCCCC;
0085:     color: #000088;
0086: }
0087: </style>
0088: 
0089: EOT;

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

解説:祝日スクリプト

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

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

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

参考サイト

(この項おわり)
header