且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-01-30 11:21:23

尝试此代码

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