デートピッカー
入力欄にフォーカスし、カレンダーから日付をセット
jquery-ui.css、jquery-ui.js、jquery.ui.datepicker-ja.jsを使用。
jQuery
$(function () {
var y, m, d, ymd;
// 祝日
var holiday = [];
h[0] = '20240101';
(略）
h[16] = '20241223';
$('#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];
}
XMLのGoogleカレンダーは利用できなくなってしまったようです。
祝日一覧はGoogleカレンダーを利用しています。
