基于单选按钮选择的jQuery DatePicker更新选项

jQuery DatePicker Update Options based on Radio Button Selection

本文关键字：DatePicker 更新 选项 jQuery 单选按钮 选择      更新时间：2023-09-26

每当选择不同的单选按钮时，我都试图让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");
    }
});

您没有正确检索单选按钮的检查值。尝试更改if条件，如下所示。

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

UPDATE 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时，它是从当前日期开始的。

相关文章：