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

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

（2021年5月5日）PHP8対応，リファラチェック改良

プログラムを実行する

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

サンプル・プログラム

ダウンロード（PHP8対応）

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

解説：jQueryの準備

  42: /**
  43:  * 共通HTMLヘッダ
  44:  * @global string $HtmlHeader
  45: */
  46: $encode = INTERNAL_ENCODING;
  47: $title  = TITLE;
  48: $width  = WIDTH;
  49: $HtmlHeader =<<< EOT
  50: <!DOCTYPE html>
  51: <html lang="ja">
  52: <head>
  53: <meta charset="{$encode}">
  54: <title>{$title}</title>
  55: <meta name="author" content="studio pahoo" />
  56: <meta name="copyright" content="studio pahoo" />
  57: <meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />
  58: <meta http-equiv="pragma" content="no-cache">
  59: <meta http-equiv="cache-control" content="no-cache">
  60: <meta http-equiv="X-UA-Compatible" content="IE=edge">
  61: <meta name="viewport" content="width={$width},user-scalable=yes" />
  62: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
  63: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  64: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
  65: <link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
  66: <style type="text/css">
  67: .date-sunday    .ui-state-default {
  68:     background-image: none;
  69:     background-color: #FF0000;
  70:     color: #FFFFFF;
  71: }
  72: .date-saturday  .ui-state-default {
  73:     background-image: none;
  74:     background-color: #0000FF;
  75:     color: #FFFFFF;
  76: }
  77: .date-holiday0  .ui-state-default {
  78:     background-image: none;
  79:     background-color: #FF6666;
  80:     color: #FFFFFF;
  81: }
  82: .date-holiday1  .ui-state-default {
  83:     background-image: none;
  84:     background-color: #FFCCCC;
  85:     color: #000088;
  86: }
  87: </style>
  88: </head>
  89:
  90: EOT;

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

jQuery 1.6.2
jQuery UI 1.8.16
Datepicker

解説：祝日スクリプト

145: /**
146:  * jQuery:Datepicker 用の祝日スクリプトを作成する
147:  * @param   pahooCalendar $pc  暦計算クラス
148:  * @param   int $start   開始年
149:  * @param   int $finish  終了年
150:  * @param   string $ymd  初期値；省略可能
151:  * @return  string スクリプト
152: */
153: function makeJSDatepicker($pc, $start, $finish, $ymd='') {
154:     $js =<<< EOT
155: $(function() {
156:   //カレンダーの範囲
157:   var minD = new Date({$start}, 0, 1);
158:   var maxD = new Date({$finish}, 11, 31);
159:
160: var holidays = {
161:
162: EOT;
163:     $cnt = 0;
164:     for ($year = $start; $year <= $finish; $year++) {
165:         for ($month = 1; $month <= 12; $month++) {
166:             $day_of_month = $pc->getDaysInMonth($year, $month);
167:             for ($day = 1; $day <= $day_of_month; $day++) {
168:                 $name = $pc->getHoliday($year, $month, $day);
169:                 if ($name != FALSE) {
170:                     $yyyymmdd = sprintf('%04d%02d%02d', $year, $month, $day);
171:                     if ($cnt > 0)   $js .= ",\n";
172:                     $js .= <<< EOT
173: "{$yyyymmdd}":{type:0, title:"{$name}"}
174: EOT;
175:                 $cnt++;
176:                 }
177:             }
178:         }
179:     }
180:
181:     $js .=<<< EOT
182:
183: };
184:
185:     //Datepickerの設定
186:     $(".datepicker").datepicker({
187:         dateFormat: "yy/mm/dd",
188:         minDate: minD,
189:         maxDate: maxD,
190:         beforeShowDay: function(day) {
191:             var result;
192:             var holiday = holidays[$.datepicker.formatDate('yymmdd', day)]
193:             // 祝日・非営業日定義に存在するか？
194:             if (holiday) {
195:                 result =  [true, "date-holiday" + holiday.type, holiday.title];
196:             } else {
197:                 switch (day.getDay()) {
198:                     case 0: // 日曜日か？
199:                         result = [true, "date-sunday"];
200:                         break;
201:                     case 6: // 土曜日か？
202:                         result = [true, "date-saturday"];
203:                         break;
204:                     default:
205:                         result = [true, ""];
206:                         break;
207:                 }
208:             }
209:             return result;
210:         }
211:     });
212:     $(".datepicker").datepicker("setDate", "{$ymd}");
213: });
214:
215: EOT;
216:
217:     return $js;
218: }