jQuery DatePicker更新選項基於單選按鈕選擇

Question

我想獲得一個jQuery日期選擇器來更新，只要選擇不同的單選按鈕。

<div style="padding-bottom: 50px;"> 
    <label>Location: </label> 
    <input type="radio" name="locate" value="Internal">Internal 
    <input type="radio" name="locate" value="External">External 
</div> 
<div> 
    <label>Due Date: </label> 
    <input type="text" name="dueDate" id="dueDate" size="25" placeholder="Please Enter A Due Date" autocomplete="off" readonly="true"> 
</div> 

jQuery的工作原理，但它不會每次點擊一個新的單選按鈕時更新datePicker。

var locate = null; 
$("input[name='locate']").click(function() { 
    locate = this.value; 

    if (locate == "Internal") { 
     $("#dueDate").datepicker({ minDate: '-6M', maxDate: '+6M' }); 
     alert("Internal"); 
    } else { 
     $("#dueDate").datepicker({ minDate: -0, maxDate: '+6M' }); 
     alert("External"); 
    } 
}); 

Answer 1

您沒有正確檢索單選按鈕的選中值。嘗試改變你if條件如下。

if ($("input[name='locate']:checked").val() == 'Internal'){ 
    $("#dueDate").datepicker({ minDate: '-6M', maxDate: '+6M' }); 
} 
else { 
    $("#dueDate").datepicker({ minDate: -0, maxDate: '+6M' }); 
} 

更新1：使用destroy摧毀日期選擇器，並重新創建爲單選按鈕的選項更改。這是完整的代碼。鏈接到工作DEMO

$("input[name='locate']").click(function() { 
    locate = this.value; 
    var dateField = $('#dueDate'); 

if ($("input[name='locate']:checked").val() == 'Internal'){ 
    dateField.datepicker('destroy'); 
    dateField.datepicker({ minDate: '-6M', maxDate: '+6M' }); 
} 
else { 
    dateField.datepicker('destroy'); 
    dateField.datepicker({ minDate: -0, maxDate: '+6M' }); 
} 

}); 

當你選擇Internal你就可以回去高達6個月，當選擇Extrenal然後從當前日期的。