Jquery Datepickerについて。。

質問

質問させてください。
javascriptが非常に苦手な初級エンジニアです。。
JqueryのDatepickerを使って、「レンタル希望日」という入力項目に入った日付を見て、「レンタル返却日」の選択できる日にちを変える、っというようなものを作っています。レンタル希望日の入力をする前にレンタルもとの販売店の選択をし、休店日も選択した販売店によって切り替えるような仕様です。苦手ながらも何とかそこまではできたのですが1点問題点が。。
レンタル希望日、返却予定日は第三希望まで入力する必要があります(必須)。
以下1ソースで第３希望までの入力を一元で行う方法があればと思っています。
丸ごと関数化すればいいのかと思い色々試してみましたが上手くいきませんでした。ソースを3回書くのはできれば避けたいです。
何卒よろしくお願いいたします。
---------------------以下ソース
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
minDate: '+3',
maxDate: '2014年12月26日',
dateFormat: 'yy年mm月dd日',
changeMonth: true,
beforeShow:function(){
var kyoten = $("select[name='kyoten']").val();
try{
if(kyoten == ''){
throw new Error('販売店を選択してください');
}
}catch(e){
alert(e.message);
window.location.reload();//あまりよろしくない。。
}
},
beforeShowDay: function(day) { // カレンダー表示前に実行
var kyoten = $("select[name='kyoten']").val();
kekka = kyoten.split('_');
var result;
switch (day.getDay()) {
case 2: // 火曜日を選択できないようにする
if(kekka[1] == 1){
result = [false];
}else{
result = [true];
}
break;
case 3: // 水曜日を選択できないようにする

if(kekka[1] == 2){
result = [false];
}else{
result = [true];
}
break;
case 6: // 土曜日を選択できないようにする
result = [false];
break;
case 0: // 日曜日を選択できないようにする
result = [false];
break;
default:
result = [true]; // それ以外は選択できる
break;
}
return result;
},
onClose: function( selectedDate ) {
var toDate = $('#from').datepicker('getDate');
var toMin = $('#from').datepicker('getDate');//toDate
var toWeek = toDate.getDay();
var tiNum = '';
var niNum = '';
// maxDateの挙動(選択した日にちの曜日番号によって(#to)で選択できる日にちを絞り込む)
if(toWeek == 1) { // 月
tiNum = 4;
} else if(toWeek == 2){ // 火
tiNum = 3;
} else if(toWeek == 3){ // 水
tiNum = 2;
} else if(toWeek == 4){ // 木
tiNum = 1;
} else if(toWeek == 5){ // 金
tiNum = '';
}
// minDateの挙動（金曜日のみ1を加算しない）
if(toWeek == 5){
niNum = '';
}else{
niNum = 1;
}
toMin.setDate(toMin.getDate() + tiNum);
toDate.setDate(toDate.getDate() + niNum);
$( "#to" ).datepicker('option', {minDate: toDate, maxDate: toMin});
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
minDate: '+1',
maxDate: '2014年12月26日',
dateFormat: 'yy年mm月dd日',
changeMonth: true,
beforeShow:function(){
var kyoten = $("select[name='kyoten']").val();
try{
if(kyoten == ''){
throw new Error('拠点を選択してください');
}
}catch(e){
alert(e.message);
window.location.reload();
}
},
beforeShowDay: function(day) { // カレンダー表示前に実行
var kyoten = $("select[name='kyoten']").val();
kekka = kyoten.split('_');
var result;
switch (day.getDay()) {
case 2: // 火曜日を選択できないようにする

if(kekka[1] == 1){
result = [false];
}else{
result = [true];
}
break;
case 3: // 水曜日を選択できないようにする
if(kekka[1] == 2){
result = [false];
}else{
result = [true];
}
break;
case 6: // 土曜日を選択できないようにする
result = [false];
break;
case 0: // 日曜日を選択できないようにする
result = [false];
break;
default:
result = [true]; // それ以外は選択できる
break;
}
return result;
}
});
});
</script>
以下html部分
<select name="kyoten">
<option value="">選択してください</option>
<?php foreach( $kyotenArr as $key=>$var):?>
<option value="<?php echo $var;?>"><?php echo $key;?></option>
<?php endforeach;?>
</select>
第一希望日<input type="text" id="from" readonly="readonly">
第一希望返却日<input type="text" id="to" readonly="readonly">
<!--第3希望まであります。。

回答No.1

LancerVII · ベストアンサー

こんにちは。

カレンダーが複数ある場合はclass属性で指定してあげれば、全てのカレンダーに適用できます。
こうすれば、それぞれの希望日ごとの処理を記述しなくても動作させることが出来ます。
この書き方であれば、たとえ第10希望まで増えたとしても、JavaScriptは何もいじる必要がありません。
(減っても同じです)

(詳細はコメントを見て、読み解いてください)

肝となるのは
カレンダーを適用する要素は$(id)で指定せず、.datepickerとしてクラスで指定する
$(id)で返却日を指定せず選択された要素から対象となる返却日を取得する

dlタグまでさかのぼり・・・と書いてある部分が「選択された要素から対象となる・・・」という部分ですが
この場合、HTMLの構成によって、要素を探す方法は変わりますのでご注意ください。

==== JavaScript
<script type="text/javascript">
$(function() {
// class="datepicker"にDatePickerを適用する
$('.datepicker').datepicker({
defaultDate: '+1w',
minDate: '+3',
maxDate: '2014年12月26日',
dateFormat: 'yy年mm月dd日',
changeMonth: true,
beforeShow:function(){
// 選択されたDatePickerからdlタグまでさかのぼり、
// その中のselect[name="kyoten"]の値を取得する
var kyoten = $('select[name="kyoten"]',$(this).parents('dl')).val();
try{
if(kyoten == ''){
throw new Error('販売店を選択してください');
}
}catch(e){
alert(e.message);
return false;
}
},
beforeShowDay: function(day) {
// 選択されたDatePickerからdlタグまでさかのぼり、
// その中のselect[name="kyoten"]の値を取得する
var kyoten = $('select[name="kyoten"]',$(this).parents('dl')).val();
kekka = kyoten.split('_');
var result = new Array(true,'','');
var day = day.getDay();
if ( day === 0 || day === 6 ) {
// 土曜日と日曜日の処理は選択不可としツールチップは定休日
result[0] = false;
result[2] = '定休日';
} else if ( day === 2 && kekka[1] === '1' ) {
// 火曜日で拠点が1の場合は選択不可としツールチップは
// 「1販売店のお休みです」とする
result[0] = false;
result[2] = '1販売店のお休みです';
} else if ( day === 3 && kekka[1] === '2' ) {
// 水曜日で拠点が2の場合は選択不可としツールチップは
// 「2販売店のお休みです」とする
result[0] = false;
result[2] = '2販売店のお休みです';
}
return result;
},
onClose: function( selectedDate, obj ) {
// 日付が選択されていない場合は何も処理をしない
if ( selectedDate === '' ) return;
// 選択されたオブジェクトを取得
var $obj = $(this);
var toDate = $obj.datepicker('getDate');
var toMin = $obj.datepicker('getDate');
var toWeek = toDate.getDay();
// 規則性があったので条件式を簡略化
// 1の場合は4加算,2の場合は2加算,3の場合は2加算,4の場合は1加算
// すなわち5から選択された曜日を引いた数が加算する数
toMin.setDate(toMin.getDate() + (5 - toWeek));
// 5以外は1を加算
// 1は選択された曜日を5で割って切り捨てて1を引いた絶対値
// 2は選択された曜日を5で割って数が1であるかの否定
// 3は選択された曜日が5の場合は0、それ以外は1を加算
// いろいろ条件を考えてみると楽しいですよ。
// toDate.setDate(toDate.getDate() + (Math.abs(Math.floor(toWeek/5)-1))); // 1
// toDate.setDate(toDate.getDate() + !(toWeek/5===1)); // 2
toDate.setDate(toDate.getDate() + (toWeek === 5 ? 0 : 1) ); // 3

// 選択されたDatePickerからdlタグまでさかのぼり、
// その中のinput[name="to"]を返却日のオブジェクトとして取得して
// 日付の設定を行う
$('input[name="to"]', $obj.parents('dl')).datepicker('option',{
minDate: toDate,
maxDate: toMin
});
}
});
});
</script>

==== HTML
<dl>
<dt>販売店</dt>
<dd>
<select name="kyoten">
<option value="">選択してください</option>
<option value="0_1">1</option>
<option value="0_2">2</option>
</select>
</dd>
<dt>第一希望日</dt>
<dd><input type="text" class="datepicker" name="from" readonly="readonly"></dd>
<dt>第一希望返却日</dt>
<dd><input type="text" class="datepicker" name="to" readonly="readonly"></dd>
</dl>
<dl>
<dt>販売店</dt>
<dd>
<select name="kyoten">
<option value="">選択してください</option>
<option value="0_1">1</option>
<option value="0_2">2</option>
</select>
</dd>
<dt>第二希望日</dt>
<dd><input type="text" class="datepicker" name="from" readonly="readonly"></dd>
<dt>第二希望返却日</dt>
<dd><input type="text" class="datepicker" name="to" readonly="readonly"></dd>
</dl>
<dl>
<dt>販売店</dt>
<dd>
<select name="kyoten">
<option value="">選択してください</option>
<option value="0_1">1</option>
<option value="0_2">2</option>
</select>
</dd>
<dt>第三希望日</dt>
<dd><input type="text" class="datepicker" name="from" readonly="readonly"></dd>
<dt>第三希望返却日</dt>
<dd><input type="text" class="datepicker" name="to" readonly="readonly"></dd>
</dl>

お礼

うぉ～、懇切丁寧にありがとうございます！
classで指定する事は考えていたのですが、idで判定の仕方が分かりませんでした！質の高いソースで凄いです！
ありがとうございます！
ベストアンサーとさせていただきます！