CODEWITHSUNDEEP
javascriptjquerycalendar
Future Webs
Future Webs

Reputation: 239

Block jQuery UI calendar dates when radio selected

I am trying to add a bit of functionality to a jQuery UI calendar but am fairly new to jQuery and am having a bit of problem with my code. This is what I have at the moment:

JS Fiddle code

<input name="button" type="radio" value="3days"/><label>Add 3 Days</label>
<p><input name="button" type="radio" value="0days"/></p>
<p>Date: <input type="text" id="datepicker" /></p>

Jquery:

$(function(){
  $('input[value="3days"]').click(function(){
    if ($(this).is(':checked'))
    {
      $('#datepicker').datepicker({ minDate: +3 });
    }
    else
    {
      $('#datepicker').datepicker({ minDate: 0 });
    }
   });
});

I basically want to block the first 3 days if a radio button is selected. If its not selected then I would like only the current date onward to be selectable.

If anyone could suggest some alterations to my code that would be great.

Upvotes: 0

Views: 187

Answers (1)

Hoa
Hoa

Reputation: 3207

See my updates

$(function(){
  $('input[type=radio]').click(function(){
    $('#datepicker').datepicker("destroy");

    if ($(this).val() == "3days") {
      $('#datepicker').datepicker({ minDate: +3 });
    } else {
      $('#datepicker').datepicker({ minDate: 0 });
    }    
  });
});

jsfiddle

Upvotes: 1

Related Questions