如何基于用户选择jquery datepicker禁用日期 [英] How to disable days based on user select jquery datepicker

问题描述

我有以下代码:

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或任何其他方法来解决此问题.

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.

小提琴的引用链接:小提琴

推荐答案

尝试此代码

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

这篇关于如何基于用户选择jquery datepicker禁用日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！