1

当我单击按钮时，所有日期选择器都会重新加载，并且不可用的日期适用于所有日期，按钮 One 应该仅在第一个日期选择器中锁定不可用的日期。怎么做？这是代码

function unavailable(date) {
     dmy = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}
var unavailableDates = ['2013-8-19'];
$(function() {

var today = '2013-08-12';

$( "#datepicker1").datepicker({
    beforeShowDay: unavailable,
    minDate: new Date(today)
});

$( "#datepicker2").datepicker( {
    beforeShowDay: unavailable,
    minDate: new Date(today)
});


$( "#datepicker3").datepicker({
    beforeShowDay: unavailable,
    minDate: new Date(today)
});

$("#dp").click(function(){
    unavailableDates = ['2013-8-24', '2013-8-25'];
    $( "#datepicker2").datepicker( {
        beforeShowDay: unavailable,
        minDate: new Date(today)
    });
});

$("#dp2").click(function(){
    unavailableDates = ['2013-8-20', '2013-8-21', '2013-8-22'];
    $( "#datepicker3").datepicker({
        beforeShowDay: unavailable,
        minDate: new Date(today)
    });
});
});


<p>Date: <input type="text" id="datepicker1" /></p>
<p>Date: <input type="text" id="datepicker2" /></p>
<p>Date: <input type="text" id="datepicker3" /></p>

<button id ="dp">One</button>
<button id ="dp2">Two</button>
4

2 回答 2

2

如果您必须使用数组（例如来自 DB 或 Web 服务的 fecth 值），您可以使用以下代码：

function unavailable(date) {
    dmy = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();

    var unavailableDates;
    switch (this.id) {
        case "datepicker1":
            unavailableDates = unavailableDates1;
            break;
        case "datepicker2":
            unavailableDates = unavailableDates2;
            break;
        case "datepicker3":
            unavailableDates = unavailableDates3;
            break;
    }

    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}
var unavailableDates1 = ['2013-8-19'];
var unavailableDates2 = ['2013-8-19'];
var unavailableDates3 = ['2013-8-19'];
$(function () {

    var today = '2013-08-12';

    $("#datepicker1").datepicker({
        beforeShowDay: unavailable,
        minDate: new Date(today)
    });

    $("#datepicker2").datepicker({
        beforeShowDay: unavailable,
        minDate: new Date(today)
    });


    $("#datepicker3").datepicker({
        beforeShowDay: unavailable,
        minDate: new Date(today)
    });

    $("#dp").click(function () {
        unavailableDates2 = ['2013-8-24', '2013-8-25'];
    });

    $("#dp2").click(function () {
        unavailableDates3 = ['2013-8-20', '2013-8-21', '2013-8-22'];
    });
});

thatbeforeShowDay在显示之前，在日期选择器中的每一天都会调用考虑。

演示：http: //jsfiddle.net/IrvinDominin/P6V8a/

于 2013-08-13T10:50:28.657 回答
0

尝试

function unavailable(unavailableDates) {
    return function(date){
        var dmy = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        if ($.inArray(dmy, unavailableDates) == -1) {
            return [true, ""];
        } else {
            return [false, "", "Unavailable"];
        }
    }
}
var unavailableDates = ['2013-8-19'];
$(function() {

    var today = '2013-08-12';

    $( "#datepicker1, #datepicker2, #datepicker3").datepicker({
        beforeShowDay: unavailable(unavailableDates),
        minDate: new Date(today)
    });

    $("#dp").click(function(){
        $( "#datepicker2").datepicker('option', 'beforeShowDay', unavailable(['2013-8-24', '2013-8-25']));
    });

    $("#dp2").click(function(){
        $( "#datepicker3").datepicker('option', 'beforeShowDay', unavailable(['2013-8-20', '2013-8-21', '2013-8-22']));
    });
});

演示：小提琴

于 2013-08-13T10:46:04.350 回答