禁用JQuery日歷的先前日期

Question

我正在使用4 datepicker日歷，我想禁用上一個選定日期的日期。.我從JQuery日期選擇器中了解了一些想法，但對於2個日期選擇器來說很好，但是我必須使用4個datepickers。 因此，如果有人有解決方案，請與我分享。對於兩個日期選擇器，這是代碼：

$(function() {
    var dates = $( "#txt1, #txt2" ).datepicker({
        minDate:0,
        maxDate:"+1Y",
        defaultDate: "+1w",
        dateFormat:'dd-mm-yy',
        numberOfMonths: 3,
        onSelect: function( selectedDate ) {
            var option = this.id == "txt1" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat, selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});

Answer 1

如果您的文本輸入的ids為txt4到txt1 ，則可以使用類似以下的簡單方法：

onSelect: function(date) {
    for(var i = 0; i < dates.length; ++i) {
        if(dates[i].id < this.id)
            $(dates[i]).datepicker('option', 'maxDate', date);
        else if(dates[i].id > this.id)
            $(dates[i]).datepicker('option', 'minDate', date);
    }
}

演示： http ： //jsfiddle.net/ambiguous/Rtbph/

一個不需要您的id屬性很好地進行比較的替代方法將因此使用index ：

var dates = $('#first, #second, #third, #fourth').datepicker({
    // ...
    onSelect: function(date) {
        var me = dates.index(this);
        for(var i = 0; i < dates.length; ++i) {
            if(i < me)
                $(dates[i]).datepicker('option', 'maxDate', date);
            else if(i > me)
                $(dates[i]).datepicker('option', 'minDate', date);
        }
    }
});

然后，您只需要確保您的初始選擇器$('#first, #second, #third, #fourth')將輸入按正確的從左到右順序排列即可。

演示： http ： //jsfiddle.net/ambiguous/xaVZM/