jQuery UIのdatepickerで、入力可能な日付の制限を別に入力された値によって変化させる方法を調べてみた。最初は、選択ボックスの更新時に
$( "#datepicker" ).datepicker({ minDate: '-1m', maxDate: '+1m' });
などと単純に再呼び出しをすれば良いかと思っていたけれど、それでは更新されなかった。そこでマニュアルをよく読んでみると、次の記述の通りsetterのような使い方をしないといけなかった様子（よく読んでいなかっただけ・・・）。
Get or set the maxDate option, after init.
//getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
//setter
$( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
結果、無事に更新が出来るようになった。そのサンプルはこちら。
2012年1月10日追記
onCloseを利用して日付の選択時にチェックを行うように変更した。例えば、土日のみ／ある特定日のみなど。ある一定期間内での入力制限はできても、同じ事を個別にはできなさそうなので、取りあえずはこんなふうにするしかないのかなあ。
また、ソースコードは次の通り。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日付取得サンプル</title>
<link rel="stylesheet" type="text/css" href="../../common/css/bootstrap.min.css"/>
<link type="text/css" href="./common/css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="./common/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./common/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function(){
var planid = 0;
// Datepicker の呼び出し
$( "#datepicker" ).datepicker({onClose: function(dateText, inst) {
//プラン番号の取得
var n = parseInt($( "#changeplan" ).val());
//日付オブジェクトの作成
var date = new Date(dateText);
var dd = parseInt(("0" + (date.getFullYear())).slice(-4) + ("0" + (date.getMonth() + 1)).slice(-2) + ("0" + date.getDate()).slice(-2));
var wd = parseInt(date.getDay());
var check = false;
if(n == 1){
check = true;
}else if(n == 2){
check = true;
}else if(n == 3){
check = true;
}else if(n == 4){
check = true;
}else if(n == 5){
check = true;
}else if(n == 6){
check = true;
}else if(n == 7){
if(wd == 0 || wd == 6) check = true;
}else if(n == 8){
if(wd > 0 && wd < 6) check = true;
}else if(n == 9){
if(dd == 20120105) check = true;
}else{
check = true;
}
if(!check){
alert("この日程は選択できません");
$( "#datepicker" ).val('');
}
}});
// Datepickerの初期化
updatedatepicker(planid);
// Datepicker の更新（セレクトボックス更新時）
$( "#changeplan" ).change(function() {
$( "#datepicker" ).val('');
updatedatepicker(parseInt($( this ).val()));
});
function updatedatepicker(arg){
var n = arg;
//オプション作成
if(n == 1){
$( "#datepicker" ).datepicker( "option", 'minDate', new Date(2012, 1 - 1, 1) );
$( "#datepicker" ).datepicker( "option", 'maxDate', new Date(2012, 3 - 1, 31) );
}else if(n == 2){
$( "#datepicker" ).datepicker( "option", 'minDate', new Date() );
$( "#datepicker" ).datepicker( "option", 'maxDate', new Date(2012, 12 - 1, 31) );
}else if(n == 3){
$( "#datepicker" ).datepicker( "option", 'minDate', new Date() );
$( "#datepicker" ).datepicker( "option", 'maxDate', "+1y" );
}else if(n == 4){
$( "#datepicker" ).datepicker( "option", 'minDate', new Date() );
$( "#datepicker" ).datepicker( "option", 'maxDate', "+2m" );
}else if(n == 5){
$( "#datepicker" ).datepicker( "option", 'minDate', "-3w" );
$( "#datepicker" ).datepicker( "option", 'maxDate', "+3w" );
}else if(n == 6){
$( "#datepicker" ).datepicker( "option", 'minDate', new Date() );
$( "#datepicker" ).datepicker( "option", 'maxDate', "+2d" );
}else if(n == 7){
//empty
}else if(n == 8){
$( "#datepicker" ).datepicker( "option", 'minDate', new Date() );
$( "#datepicker" ).datepicker( "option", 'maxDate', "+1m" );
}else if(n == 9){
$( "#datepicker" ).datepicker( "option", 'minDate', new Date(2012, 1 - 1, 1) );
$( "#datepicker" ).datepicker( "option", 'maxDate', new Date(2012, 1 - 1, 15) );
}else{
//empty
}
}
});
</script>
<style>
table {
width:560px;
margin:10px auto;
}
h3 {
text-align:center;
}
</style>
</head>
<body>
<h3>jQuery ui datepickerで入力可能な日付の制限をする</h3>
<hr />
<table class="bordered-table">
<tbody>
<tr>
<th>プラン選択</th>
<td><select id="changeplan" name="plan">
<option value="0">選択して下さい</option>
<option value="1">2012年1月1日から2012年3月31日まで</option>
<option value="2">本日を起点に2012年12月31日まで</option>
<option value="3">本日を起点に1年後まで</option>
<option value="4">本日を起点に2ヶ月後まで</option>
<option value="5">本日を起点に前後3週間</option>
<option value="6">本日、明日、明後日</option>
<option value="7">土曜日と日曜日のみ</option>
<option value="8">本日を起点に1ヶ月までの平日のみ</option>
<option value="9">2012年1月5日のみ</option>
</select><br /></td>
</tr>
<tr>
<th>日程選択</th>
<td><input size="12" maxlength="10" id="datepicker" name="date" type="text" value="" /></td>
</tr>
</tbody>
</table>
</body>
</html>