jQuery DatePicker Update Options based on Radio Button Selection

问题

I am trying to get a jquery date picker to update whenever a different radio button is chosen.

<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>

The jQuery works but it doesn't update the datePicker every time a new radio button is clicked.

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");
    }
});

回答1:

You are not retrieving the radio button's checked value correctly. Try changing you if condition like below.

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

UPDATE 1: Use destroy to destroy the datepicker and recreate it as the radio button's option changes. Here is the complete code. Link to working 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' });
 }

});

When you choose Internal you'll be able to go back upto 6 months and when Extrenal is chosen then it's from the current date.

来源：https://stackoverflow.com/questions/26742575/jquery-datepicker-update-options-based-on-radio-button-selection

标签

javascript

jquery

datepicker