javascript - 如何禁用基于用户选择的日期 jquery datepicker

Question

我有以下代码:

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>

脚本

$( 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;
    }
  } );

我的要求是根据用户选择启用一周中的几天。默认情况下，将启用所有周日期。例如，如果用户选择星期一和星期二，则需要从日历中禁用其余的其他日期。如何使用 beforeShowDay 或任何其他解决此问题的方法来完成此操作。

引用 fiddle 链接:fiddle

Answer 1

尝试此代码

$( 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>