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希望まであります。。
お礼
遅くなってすみません。 参考になりました。 ありがとうございました。