Question

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

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>

Answer 1

如果必须使用数组（例如来自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/

Answer 2

尝试

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

演示：Fiddle

jquery datepicker在一个实例中更改不可用日期

2 个答案: