CODEWITHSUNDEEP
javascriptjquerydatepicker
Hriju
Hriju

Reputation: 738

Update DaysOfWeekDisabled of bootstrap datepicker on changing value in a select dropdown

I am trying to change datepicker option based on the input of a dropdown. There are three cases. For case1 and case2 I want only Monday, Wednesday and Thursday to be available for selection and all other days will be blurred/disabled.

For case3 Monday, Tuesday, Wednesday and Thursday will be enabled and all other days will be blurred or disabled.

The problem is the datepicker works according to the firsttime selection. For example, if I select case1 first, the calendar option works fine. After that if I select case 3 it does not change the calendar options. That means it shows only the date disabled which were for case 1. It should have enabled Tuesday in the calendar but it did not. 

    <select name="iEventType" id="iEventType" class="form-control select2">
     <option value="">Select Event Type</option>
      <option value="case1">case1</option>
      <option value="case2">case2</option>
      <option value="case3">case3</option>

  </select>

    <div class="input-field" id="event_type">                          
      <input type="text" class="form-control"  placeholder="Select Day (Please Select Event Type First)"  name="event_days" id="iEventDays" value="">
    </div>



<script>
     $("#iEventType").change(function() {
       var val = $(this).val();
       if (val == "case1" || val == "case2") {
         var disabled_day = [0, 2, 5, 6];

         $('#iEventDays').datepicker({
           startDate: new Date(),
           autoclose: true,
           format: 'mm/dd/yyyy',
           daysOfWeekDisabled: disabled_day
         });

       } else if (val == "case3") {


         var disabled_day = [0, 5, 6]
         $('#iEventDays').datepicker({
           startDate: new Date(),
           autoclose: true,
           format: 'mm/dd/yyyy',
           daysOfWeekDisabled: disabled_day
         });

       } else {
         $("#iEventDays").val("");
       }
     });
</script>

You can see the JS Fiddle in here.

Pleases let me know how I can solve this problem. I have tried with datepicker destroy and again reinitiating the calendar in my code, for that case also it did not work.

I have already searched similar issues and answer like the following.

DatePicker in jquery is not loaded for the second time

Upvotes: 0

Views: 1299

Answers (1)

Bilel
Bilel

Reputation: 1429

You just need to add : $('#iEventDays').datepicker('remove'); when you initialize your On Change event function.

 $("#iEventType").change(function() {
   var val = $(this).val();
   $('#iEventDays').datepicker('remove');
   if (val == "case1" || val == "case2") {

     var disabled_day = [0, 2, 5, 6];
    
     // $("#iEventDays").datepicker('option','daysOfWeekDisabled',disabled_day);
     $('#iEventDays').datepicker({
       startDate: new Date(),
       autoclose: true,
       format: 'mm/dd/yyyy',
       daysOfWeekDisabled: disabled_day
     });

   } else if (val == "case3") {

   
     var disabled_day = [0, 5, 6]
     $('#iEventDays').datepicker({
       startDate: new Date(),
       autoclose: true,
       format: 'mm/dd/yyyy',
       daysOfWeekDisabled: disabled_day
     });

   } else {
     $("#iEventDays").val("");
     //$( "#iEventDays").datepicker('disable');
   }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
</script>
<select name="iEventType" id="iEventType" class="form-control select2">
         <option value="">Select Event Type</option>
         <option value="case1">case1</option>
         <option value="case2">case2</option>
         <option value="case3">case3</option>
                            
  </select>
                            
<div class="input-field" id="event_type">
                           
<input type="text" class="form-control"  placeholder="Select Day (Please Select Event Type First)"  name="event_days" id="iEventDays" value="">

</div>

Upvotes: 1

Related Questions