CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
Vikash
Vikash

Reputation: 887

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.

<input type="radio" name="radio1" value="radio1" checked> Radio 1 

<input type="radio" name="radio2" value="radio2" >Radio 2

My datepicker html is:

<input 
       type="text" 
       id="mydatepicker" 
       aria-controls="sample_1" 
       class="form-control input-small input-inline" >

My JS code is:

$('#mydatepicker').datepicker({
        format: 'dd/mm/yyyy',
        beforeShowDay: EnableDisableDates
});

function EnableDisableDates(date) {
    var formattedDate = $.datepicker.formatDate('dd/mm/yy', date);
    if ($("#radio1").is(':checked') == false) {
        if (date < Date.parse('11/23/2015'))
            return {enabled: false};
    }
    else {
         return [true];
    }
}

I want to show all the dates on selecting Radio 1 and I want to disable dates on selecting radio button 2 (Radio 2) before 23-Nov-2015().

The above is my scenario.

My problem is:

For first time it loads, it is working fine for the Radio 1 i.e. it enables all the dates for Radio 1.

On selecting the Radio 2, it is not calling the method EnableDisableDates method of beforeShowDay property in datepicker.

I don't know why it is not calling the method. Help me to get out of this problem.

Upvotes: 1

Views: 321

Answers (2)

Hriju
Hriju

Reputation: 738

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',                  
    });

} });

Upvotes: 0

Afsar
Afsar

Reputation: 3124

you ca use minDate to disable dates instead of looing it manually which will cost perfomance:

Try this:

JS

$(function() {   
   $(".radio1").change(function () {    
    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',                  
        });      
   }
  });
 $('#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

Upvotes: 1

Related Questions