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

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

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

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

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

目次

サンプル・プログラム

圧縮ファイルの内容
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: }

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

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

参考サイト

(この項おわり)
header