デートピッカー

入力欄にフォーカスし、カレンダーから日付をセット

jquery-ui.css、jquery-ui.js、jquery.ui.datepicker-ja.jsを使用。

jQuery

$(function () { var y, m, d, ymd; // 祝日 var holiday = []; h[0] = '20170101'; (略) h[16] = '20171223'; $('#datepicker').datepicker({ dateFormat: 'yy/mm/dd', // 前1カ月 minDate: '-1m', // 後1カ月 maxDate: '+1m', // 2か月分表示 // numberOfMonths: [1,2], beforeShowDay: function(day) { y = day.getFullYear(); m = day.getMonth() + 1; d = day.getDate(); ymd = y + ('0' + m).slice(-2) + ('0' + d).slice(-2); // 祝日 for (var i = 0; i < holiday.length; i++) { if (holiday[i] == ymd) { return [true, 'holiday', '']; } } // 通常 return [true, '']; } }) });

jquery-ui.cssをベースに以下を追加。

CSS

.ui-datepicker { font-size: 8pt; } .ui-widget-content { background: #fff; border: 1px solid #ccc; color: #000; } .ui-widget-header { background: #ddd; border: 1px solid #ccc; color: #000; font-weight: bold; } .ui-datepicker td a { text-align: center; } .ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default { background: #eee; border: 1px solid #ddd; color: #000; font-weight: normal; } .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight { background: #07c; border: 1px solid #ddd; color: #fff; } /* 土日、祝日 */ .ui-datepicker-week-end .ui-state-default,.holiday .ui-state-default { background: #aaa; color: #000; } .ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active { background: #fc3; border: 1px solid #ddd; color: #000; }

HTML

<input type="text" id="datepicker">

サンプル

祝日

PHP

// 期間 $start_date = date('Y-m-d', mktime(0, 0, 0, date('m') - 1, 1, date('Y'))); $end_date = date('Y-m-d', mktime(0, 0, 0, date('m') + 1, 1, date('Y') + 1)); $start = urlencode(date(DATE_ATOM, strtotime($start_date.' 00:00:00 +9 hour'))); $end = urlencode(date(DATE_ATOM, strtotime($end_date.' 23:59:59 +9 hour'))); // XMLを読み込む $xml = file_get_contents('https://www.google.com/calendar/feeds/ja.japanese%23holiday%40group.v.calendar.google.com/public/basic?start-min=' . $start . '&start-max=' . $end); // XML文字列をオブジェクトに代入 $obj = simplexml_load_string($xml); // 値をJSON形式にして返す $json = json_encode($obj); // JSON形式から配列にデコード $arr = json_decode($json, TRUE); foreach ($arr['entry'] as $entryVal) { preg_match('/(20[0-9]{2})\/([0-9]{1,2})\/([0-9]{1,2})/i', $entryVal['content'], $matches); $date[] = $matches[1] . $matches[2] . $matches[3]; }

祝日一覧はGoogleカレンダーを利用しています。

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。