使用复选框限制日期在jQuery日期选择器

Question

我想限制jquery datepicker使用复选框的日子 - 我已经管理到目前为止限制天（硬编码）最初但不确定如何继续使其动态更改。

这里是我到目前为止的代码...

<table id="selectdays"> 
<tr> 
<td><input type="checkbox" value="sun"></td> 
<td><input type="checkbox" value="mon"></td> 
<td><input type="checkbox" value="tue"></td> 
<td><input type="checkbox" value="wed"></td> 
<td><input type="checkbox" value="fri"></td> 
<td><input type="checkbox" value="sat"></td> 
<td><input type="checkbox" value="sun"></td> 
</tr> 
</table> 

<input type="text" id="datepicker"> 


$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "../images/calendar.jpg", 
     buttonImageOnly: true, 
     dateFormat: 'DD, MM d, yy', 
     minDate: 0, 
     beforeShowDay: nonWorkingDates, 
}); 

function nonWorkingDates(date){ 
    var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6; 
    var closedDays = [[Monday], [Tuesday]]; 
    for (var i = 0; i < closedDays.length; i++) { 
     if (day == closedDays[i][0]) { 
      return [false]; 
     } 

    } 
    return [true]; 
} 

}); 

Answer 1

试试这个：

<table id="selectdays"> 
    <tr> 
     <td><input type="checkbox" value="1">Monday</td> 
     <td><input type="checkbox" value="2">Tuesday</td> 
     <td><input type="checkbox" value="3">Wednesday</td> 
     <td><input type="checkbox" value="4">Thursday</td> 
     <td><input type="checkbox" value="5">Friday</td> 
     <td><input type="checkbox" value="6">Saturday</td> 
     <td><input type="checkbox" value="0">Sunday</td> 
    </tr> 
</table> 

工作版本：

var _selectedDays=new Array(); 
$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "css/images/calendar.png", 
     buttonImageOnly: true, 
     dateFormat: 'DD, MM d, yy', 
     minDate: 0, 
     beforeShowDay: nonWorkingDates, 
    }); 
    $("#selectdays input:checkbox").change(function(){ 
     var v=$(this).attr("value")*1; 
     if($(this).is(":checked")){ 
      if($.inArray(v,_selectedDays)<0){ 
       _selectedDays.push(v); 
      } 
     }else{ 
      var f=$.inArray(v,_selectedDays); 
      if(f>=0){ 
       _selectedDays.splice(f,1); 
      }    
     } 
    }); 
}); 

function nonWorkingDates(date){ 
    var day = date.getDay(); 
    for(var i=0;i<_selectedDays.length;i++){ 
     if(day==_selectedDays[i]){return [false];} 
    }  
    return [true]; 
} 

Answer 2

的一个起点可以是：

<table id="selectdays"> 
<tr> 
    <td><input type="checkbox" value="1">Monday</td> 
    <td><input type="checkbox" value="2">Tuesday</td> 
    <td><input type="checkbox" value="3">Wednesday</td> 
    <td><input type="checkbox" value="4">Thursday</td> 
    <td><input type="checkbox" value="5">Friday</td> 
    <td><input type="checkbox" value="6">Saturday</td> 
    <td><input type="checkbox" value="0">Sunday</td> 
</tr> 
</table> 

<input type="text" id="datepicker"> 

$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "../images/calendar.jpg", 
     buttonImageOnly: true, 
     dateFormat: 'DD, MM d, yy', 
     minDate: 0, 
     beforeShowDay: nonWorkingDates, 
}); 

function nonWorkingDates(date){ 
    var day = date.getDay(); 
    if ($('#selectdays input[value='+day+']').is(':checked')) { 
     return [false]; 
    } 

    return [true]; 
}