How to disable days based on user select jquery datepicker

问题

I have following code:

html

<p>from</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom">
<p>to</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

<p>
  select days of the week
</p>

<div>
    <div class="spromotion-condition-datepickerbox" id="sproid-bookingcond-aplicabledays">
        <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
          <input type="checkbox" value="sunday" name="condition-aplicable-day" checked>S
        </label>
        <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
          <input type="checkbox" value="monday" name="condition-aplicable-day" checked>M
        </label>
        <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
          <input type="checkbox" value="tuesday" name="condition-aplicable-day" checked>T
        </label>
        <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
          <input type="checkbox" value="wednesday" name="condition-aplicable-day" checked>W
        </label>
        <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
          <input type="checkbox" value="thursday" name="condition-aplicable-day" checked>T
        </label>
        <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
          <input type="checkbox" value="friday" name="condition-aplicable-day" checked>F
        </label>
        <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
           <input type="checkbox" value="saturday" name="condition-aplicable-day" checked>S
        </label>
    </div>
</div>

script

$( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#sproid-bookingcondition-datefrom" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#sproid-bookingcondition-dateto" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

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

      return date;
    }
  } );

My requirement is to enable days of the week based on user selection. By default all week dates will be enabled. Eg if user selects monday and tuesday rest of the other dates need to be disabled from the calender. How is this possible to be done using beforeShowDay or any other approach to fixing this.

Refer link for fiddle : fiddle

回答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 ) );
      });

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<p>from</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom">
<p>to</p>
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

<div>
	<div class="spromotion-condition-datepickerbox" id="sproid-bookingcond-aplicabledays">
		<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
		  <input type="checkbox" value="sunday" class="chkWeek" data-value="0" name="condition-aplicable-day" checked>S
		</label>
		<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
		  <input type="checkbox" value="monday" class="chkWeek" name="condition-aplicable-day" data-value="1" checked>M
		</label>
		<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
		  <input type="checkbox" value="tuesday" class="chkWeek" name="condition-aplicable-day" data-value="2" checked>T
		</label>
		<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
		  <input type="checkbox" value="wednesday" class="chkWeek" name="condition-aplicable-day" data-value="3" checked>W
		</label>
		<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
		  <input type="checkbox" value="thursday" class="chkWeek" name="condition-aplicable-day" data-value="4" checked>T
		</label>
		<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
		  <input type="checkbox" value="friday" class="chkWeek" name="condition-aplicable-day" data-value="5" checked>F
		</label>
		<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
		   <input type="checkbox" value="saturday" class="chkWeek" name="condition-aplicable-day" data-value="6" checked>S
		</label>
	</div>
</div>

来源：https://stackoverflow.com/questions/43446742/how-to-disable-days-based-on-user-select-jquery-datepicker