DatePicker In Jquery Is Not Loaded For The Second Time

I have a datepicker in my page and also I have two radio buttons as follows. Radio 1 ).datepicker('destroy'); $('#mydatepicker').datepicker({ format: 'dd/mm/yyyy', minDate: '11/23/2015' }); }else{ $('#mydatepicker').datepicker('destroy'); $('#mydatepicker').datepicker({ format: 'dd/mm/yyyy', }); } }); $('#mydatepicker').datepicker({format: 'dd/mm/yyyy'}); });

HTML:

 <input type="radio" class="radio1" name="radio1" value="radio1" checked> Radio 1 
 <input type="radio" class="radio1" name="radio1" value="radio2" >Radio 2<input 
         type="text" 
         id="mydatepicker" 
         aria-controls="sample_1" 
         class="form-control input-small input-inline" >

Fiddle

update:

we have used the destroy to create new instance of datepicker jQuery DatePicker -- Changing minDate and maxDate on the fly see this

Solution 2:

I faced similar issue. In my case it was a dropdown and based on the dropdown it I was disabling certain days in the datepicker. It was working for the change I made. But for second change it was not working.

Finally the solution I got was datepicker('remove').

So this should work with just adding one line of code in the change function.

$('#mydatepicker').datepicker('remove');

So your code should like this:

$(".radio1").change(function () {
$('#mydatepicker').datepicker('remove');
if($(".radio1:checked").val()=="radio2"){
  $('#mydatepicker').datepicker('destroy');
    $('#mydatepicker').datepicker({
      format: 'dd/mm/yyyy',        
      minDate: '11/23/2015'
    });
}else{
  $('#mydatepicker').datepicker('destroy');
  $('#mydatepicker').datepicker({
      format: 'dd/mm/yyyy',                  
    });      

} });