ホームページ制作は相模原市のオフィス木蓮

jQueryUI の datepicker で任意の日付を選択不可にする

予約などの日付を扱うフォームではご要望が多い detapicker ですが、定休日や臨時休業日(年末・年始やお盆など)も反映させたいとのご要望も多く、さらに、その日付設定も自分のところで行いたいとのことでして。。。

日付設定は、管理画面を設けて、データベースに保存させればよいわけですが、そのデータベースに保存された休日一覧を公開ページにある detapicker に反映させる方法を以下に載せます。

ファイル名はなんでもよいのですが、ここでは holidays.php として、直接アクセスすると休日のリストを javascript の配列として出力させるようにします。

var holiday = ["20151114", "20151128", "20151212", "20151226", "20151229", "20151230", "20151231"];

HTML上では、上記の php を読み込みます。

<script src="./holidays.php" type="text/javascript"></script>

あとは datepicker の指定で上記の配列を反映させます。

$(function(){
	var holidayList = holiday;
	$.datepicker.setDefaults( $.datepicker.regional['ja'] );
	$( '.datepicker' ).datepicker({
		numberOfMonths: 2,
		minDate: '+4d',
		maxDate: '+1y',
		dateFormat: 'yy/mm/dd',
		beforeShowDay: function(day){
			var result;
			var dtDay = $.format.date( day, "yyyyMMdd" );
			if( $.inArray( dtDay, holidayList ) != -1 ){
				result = [false];
			} else {
          			result = [true];
			}
			return result;
		}
	});
});
</script>

「var holidayList = holiday;」は、店舗(事務所)毎に異なるケースを踏まえての記述です。

上記は町田市と相模原市に事務所をもつまちだ・さがみ総合法律事務所さんの予約フォームで利用しています。

[mokurenCB]

staff

,