Отключить предыдущие даты календаря JQuery

Я беру 4 календаря выбора даты и хочу отключить даты предыдущей выбранной даты. У меня есть идея от средства выбора даты JQuery, но это нормально для 2 средств выбора даты, но я должен использовать 4 средства выбора даты. Так что, если у кого-то есть решение, просто поделитесь со мной. Для выбора двух дат это код:

$(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 );
        }
    });
});

javascript html jquery jquery-ui jquery-ui-datepicker
person shashikant    schedule 01.02.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если ваши текстовые входы имеют ids от txt1 до txt4, тогда сработает что-то простое:

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/

person mu is too short    schedule 01.02.2012
comment
Отличная демонстрация. Спасибо. Это то, что я искал. - person mtk; 06.06.2012