How To Disable Days Based On User Select Jquery Datepicker

I have following code: html

from

Solution 1:

Try this code

$( function() {
  var list=[];
  $('input.chkWeek').on('click', function(){
	if(!$(this).is(':checked')){
		list.push($(this).attr('data-value'));
	}else{
		var deselect=$(this).attr('data-value');
		list = $.grep(list, function(value) {
		return value != deselect;
		});
	}
 });
    var dateFormat = "mm/dd/yy",
      from = $( "#sproid-bookingcondition-datefrom" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1,  
          beforeShowDay: function(day) {
            var day = day.getDay();
            var c;
            for(var i=0;i<list.length;i++){
                if(list[i]==day){
                	c=day;
                }
            }
            if (day ==c) {
              return [false, "disabled_week"]
            } else {
              return [true, "selectable_week"]
            }
         }
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#sproid-bookingcondition-dateto" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        beforeShowDay: function(day) {
            var day = day.getDay();
            var c;
            for(var i=0;i<list.length;i++){
                if(list[i]==day){
                	c=day;
                }
            }
            if (day ==c) {
              return [false, "disabled_week"]
            } else {
              return [true, "selectable_week"]
            }
         }
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

    functiongetDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
      return date;
    }

<!------->
  } );

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><linkrel="stylesheet"href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"><p>from</p><inputtype="text"class="spromotion-input-inbody spromotion-input-datepick"id="sproid-bookingcondition-datefrom"><p>to</p><inputtype="text"class="spromotion-input-inbody spromotion-input-datepick"id="sproid-bookingcondition-dateto"><div><divclass="spromotion-condition-datepickerbox"id="sproid-bookingcond-aplicabledays"><labelname="promo-type"class="radio-inline spromotion-aplicabledays-checkbx"><inputtype="checkbox"value="sunday"class="chkWeek"data-value="0"name="condition-aplicable-day"checked>S
		</label><labelname="promo-type"class="radio-inline spromotion-aplicabledays-checkbx"><inputtype="checkbox"value="monday"class="chkWeek"name="condition-aplicable-day"data-value="1"checked>M
		</label><labelname="promo-type"class="radio-inline spromotion-aplicabledays-checkbx"><inputtype="checkbox"value="tuesday"class="chkWeek"name="condition-aplicable-day"data-value="2"checked>T
		</label><labelname="promo-type"class="radio-inline spromotion-aplicabledays-checkbx"><inputtype="checkbox"value="wednesday"class="chkWeek"name="condition-aplicable-day"data-value="3"checked>W
		</label><labelname="promo-type"class="radio-inline spromotion-aplicabledays-checkbx"><inputtype="checkbox"value="thursday"class="chkWeek"name="condition-aplicable-day"data-value="4"checked>T
		</label><labelname="promo-type"class="radio-inline spromotion-aplicabledays-checkbx"><inputtype="checkbox"value="friday"class="chkWeek"name="condition-aplicable-day"data-value="5"checked>F
		</label><labelname="promo-type"class="radio-inline spromotion-aplicabledays-checkbx"><inputtype="checkbox"value="saturday"class="chkWeek"name="condition-aplicable-day"data-value="6"checked>S
		</label></div></div>

Share