datepicker : disable days using drop down list?

debugcn Published at Dev

Ed57

I have a drop down list which looks like this :

   <span id="billet">
      <select id="test">

          <option value="Option1">Option1</option>
          <option value="Option2">Option2</option>

       </select>
   </span>

And an input like this :

   <input type="text" class="datepicker" />

By choosing "option1", I would like to disable week-ends from datepickers.

By choosing "option2", I would like to reactivate all the days from datepickers.

Here is my JS :

$("#billet").on('change', 'select', function() { 
    	if($('#test').val() == 'Option1') {
    		$('.datepicker').datepicker({
    			beforeShowDay: $.datepicker.noWeekends
    		});
    	}
    	else {
    		$('.datepicker').datepicker();
    	}
    });

Note : I use "span" to circle my select because this drop down list is created dynamically by Ajax / PHP.

hungndv

Here you are: should destroy it.

$("#test").change(function() {
  // remove destroy datepicker
  $('.datepicker').datepicker("destroy");
  if ($('#test').val() == 'Option1') {
    $('.datepicker').datepicker({
      beforeShowDay: $.datepicker.noWeekends
    });
  } else {
    $('.datepicker').datepicker();
  }
});
$("#test").trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<span id="billet">
      <select id="test">

          <option value="Option1">Option1</option>
          <option value="Option2">Option2</option>

       </select>
   </span>

<input type="text" class="datepicker" />

Refer: How do I *completely* remove a jQuery UI datepicker?

Hope this helps.

Collected from the Internet

Please contact [email protected] to delete if infringement.