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];
}

使用复选框限制jQuery Datepicker中的天数

2 个答案: