1

ボタンをクリックすると、すべての日付ピッカーがリロードされ、使用できない日付がすべての日付で機能します。ボタン 1 は、使用できない日付を最初の日付ピッカーでのみロックする必要があります。どうやってするの？ここにコードがあります

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 サービスからの fect 値など)、次のコードを使用できます。

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表示される前に、datepicker で日ごとに考慮が呼び出されます。

デモ: 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 に答える