如何根據用戶選擇的jQuery日期選擇器禁用天

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

Answer 1

試試這個代碼

$(function() { 
 
    var list=[]; 
 
    $('input.chkWeek').on('click', function(){ 
 
\t if(!$(this).is(':checked')){ 
 
\t \t list.push($(this).attr('data-value')); 
 
\t }else{ 
 
\t \t var deselect=$(this).attr('data-value'); 
 
\t \t list = $.grep(list, function(value) { 
 
\t \t return value != deselect; 
 
\t \t }); 
 
\t } 
 
}); 
 
    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){ 
 
       \t 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){ 
 
       \t 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> 
 
\t <div class="spromotion-condition-datepickerbox" id="sproid-bookingcond-aplicabledays"> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="sunday" class="chkWeek" data-value="0" name="condition-aplicable-day" checked>S 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="monday" class="chkWeek" name="condition-aplicable-day" data-value="1" checked>M 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="tuesday" class="chkWeek" name="condition-aplicable-day" data-value="2" checked>T 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="wednesday" class="chkWeek" name="condition-aplicable-day" data-value="3" checked>W 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="thursday" class="chkWeek" name="condition-aplicable-day" data-value="4" checked>T 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="friday" class="chkWeek" name="condition-aplicable-day" data-value="5" checked>F 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="saturday" class="chkWeek" name="condition-aplicable-day" data-value="6" checked>S 
 
\t \t </label> 
 
\t </div> 
 
</div>