0

私はjQuery UI datepickerを持っていますが、その日付では5日(またはそれ以上)の日付のみが利用可能になります。 、私もをチェックすると、チェックボックスを持っているチェックボックスに基づいてdatepickerオプションを変更するにはどうすればよいですか?

var dateToday = new Date(); 
$("#datepicker").datepicker({ 
    minDate: '+1w', // your min date 
    beforeShowDay: $.datepicker.noWeekends // disable weekends 
}); 

本質的minDateをオーバーライドし、minDate利用可能今日の日付(というよりも、週アウト)を行います:これはそのため正常に動作

<input type="checkbox" class="lessThanFiveDays" value="1" name="less-than-5-days" />I need this earlier than the standard 5 business days 

私は、jQueryをチェックするチェックボックスがどのような順序で行われる必要があるのか​​と苦労しています。また、ボックスがチェックされているかどうかだけチェックするか、チェックボックスの "変更"イベントでdatepickerパラメータを変更する必要がありますか?

下記これは間違っている、うまくいけば、それは私が自分自身を混乱させてる方法を説明できます:初期化子への2番目の呼び出しが動作しませんので、

$("#datepicker").datepicker({ 
    minDate: '+1w', // your min date 
    beforeShowDay: $.datepicker.noWeekends // disable weekends*/ 
}); 
$('.lessThanFiveDays').change(function() { 
    if($(this).is(":checked")) { 
     $("#datepicker").datepicker({ 
      minDate: dateToday, // your min date 
      beforeShowDay: $.datepicker.noWeekends // disable weekends*/ 
     }); 
    } 
}); 

答えて

2

、あなただけのチェックボックスの変更ハンドラにminDate機能を使用することができます。ここで

作業例:

var dateToday = new Date(); 
 
$("#datepicker").datepicker({ 
 
    minDate: '+1w', 
 
    beforeShowDay: $.datepicker.noWeekends 
 
}); 
 
$('.lessThanFiveDays').change(function() { 
 
    if($(this).is(":checked")) { 
 
    $("#datepicker").datepicker("option", "minDate", dateToday); 
 
    } else { 
 
    $("#datepicker").datepicker("option", "minDate", '+1w'); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/> 
 

 
<input type="text" id="datepicker"> 
 
<input type="checkbox" class="lessThanFiveDays" value="1" name="less-than-5-days" />I need this earlier than the standard 5 business days

関連する問題