JQuery 2 календарей один диапазон настроек для другого

Question

Я использую два jquery на одной странице. В готовом документе один из них установлен на текущую дату, другой на текущую дату + 15 дней

Я пытаюсь сделать так, чтобы во втором календаре никогда не было возможности выбрать дату, которая раньше, чем первые +15 дней.

Пример: в готовом документе Календарь 1: показывает 07.05.11, календарь 2: показывает 07/20/11, если я выберу 7/21/11 в календаре, календарь 2 должен отображать: 07.05.11. только в фокусе второго поля ввода указателя даты значение поля изменится на 5-е и будет правильно отображаться в представлении календаря. Это должно сделать это автоматически.

Вот пример того, как это обрабатывается

// Setting the current date and adding 15 days 

function setRange() {
    d=new Date($('#dateofchange').datepicker('getDate'));
    d.setDate(d.getDate() + 15);
    $('#EffectiveDate').datepicker('option', 'minDate', new Date(d));
    d=new Date($('#dateofchange').datepicker('getDate'));
    d.setFullYear(d.getFullYear() + 1);
    $('#EffectiveDate').datepicker('option', 'maxDate', new Date(d));
}

// This is the initial datePicker

$('#dateofchange').datepicker({
    showButtonPanel: true,
    minDate: new Date()
    });

// This is the current Date plus 15 days. 

$('#EffectiveDate').datepicker({
    showButtonPanel: true,
    beforeShow: setRange
});

Answer 1

Я бы переписал его чуть-чуть и сделал бы что-то вроде этого.

Когда дата выбирается в #dateofchange DatePicker, параметры minDate и maxDate #EffectiveDate получатустановить снова, основываясь на дате, которую выбрал пользователь.

function addDays(date) {
    var d = new Date(date);
    d.setDate(d.getDate() + 15);   
    return d;
}
function addYear(date){
    var d = new Date(date);
    d.setFullYear(d.getFullYear() + 1);
    return d;
}

$('#dateofchange').datepicker({
    showButtonPanel: true,
    minDate: new Date(),

    // change EffectiveDate minDate and maxDate when the user selects a date in #dateofchange
    onSelect:function(dateText, inst) {
        var d = new Date(dateText);
        $("#EffectiveDate").datepicker( "option", "minDate", addDays(d));
        $("#EffectiveDate").datepicker( "option", "maxDate", addYear(d));        
    }
});

$('#EffectiveDate').datepicker({
    showButtonPanel: true,
    minDate: addDays(new Date()),
    maxDate: addYear(new Date())
});

Возможно, она написана более кратко и элегантно, но это должно работать так, как вы описали.

jsFiddle:http://jsfiddle.net/bjorn/aVBca/2/