過去のdatepicker設定では曜日指定だけで、特定の日付が設定できなかったが、今回のコードは設定が可能になる。
$(function() {
// 休日を指定（複数可能）
var holidays = [
'2023/08/15',
'2020/02/12',
];
$('#calendar').datepicker({
minDate: '1d', //明日から
maxDate: '+2m', //1ヶ月後までが選択可能範囲
dateFormat: 'yy年mm月dd日(D)', //年-月-日(曜日)
beforeShowDay: function(date) {
var result;
var ymd = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
var HName = ktHolidayName(ymd);
//祝日のセット
if(HName != '') {
result = [true, 'date-holiday', HName]; //trueで、祝日の日付選択可能
} else {
// 休日のセット
for (var i = 0; i < holidays.length; i++) {
var htime = Date.parse(holidays[i]); //timeへ変換
var holiday = new Date();
holiday.setTime(htime);
// 休日
if (holiday.getYear() == date.getYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [false, 'holiday']; //falseで「休日を格納」で追加した日の日付選択不可
}
}
switch (date.getDay()) {//各曜日のセット
case 0: //日曜日
result = [false, 'sunday']; //falseで日曜日の日付選択不可
break;
case 6: //土曜日
result = [false, 'saturday']; //falseで土曜日の日付選択不可
break;
default:
result = [true];
break;
}
}
return result;
},
onSelect: function(dateText, inst) {
$('#calendar').val(dateText);
}
});
$(function() {
$("#calendar").datepicker();
$("#calendar").datepicker("option", "showOn", 'button');
$("#calendar").datepicker("option", "buttonImageOnly", true);
$("#calendar").datepicker("option", "buttonText", 'カレンダーから選択');
$("#calendar").datepicker("option", "buttonImage", 'https://megane-fujita.com/wp-content/themes/fujita2021/images/ico_calendar.png');
});