datepickerの特定のオプションのみを変更する

もろもろdatepickerの設定をして出力して
たとえばセレクトボックス切り替えたら
それに応じて特定のオプションのみを変更する方法。

まあ公式のページでもやってることなので大したものじゃないんですが、クライアントにふと言われて「あれ?できるのかな?」って一瞬思っちゃったので一応できますよの備忘録。

デフォルトの設定例

<script>
$(function() {
	$('[type="text"]').datepicker({
		minDate: '+1',
		maxDate: '+3m'
	});
});
</script>

選択できる日付を
翌日から、3ヶ月先までにしていたとします。

セレクトボックスの切り替えでオプションを変更

<script>
$(function() {
	$('select').on('change', function() {
		var val = $(this).val();
		if( val == '3日後まで選択可能') {
			$('[type="text"]').datepicker( 'option', 'maxDate', '+3d' );
		} else {
			$('[type="text"]').datepicker( 'option', 'maxDate', '+3m' );
		}
	});
});
</script>

セレクトボックスで「3日後まで選択可能」を選んだら3日後までしか選べないように変更。
デフォルトを選んだら元の設定に。

これだけ。

DEMO

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です