jquery 2 个日历一个设置范围另一个

Question

I am using two jquery on one page. On Document ready one of them is set to the current date, the other is set to the current date + 15 days

What I am trying to do is make the second calendar never allow to choose a date that is earlier to the first +15 days.

Example: on Document ready calendar 1: shows 07/05/11 calendar 2: shows 07/20/11,If i choose 7/21/11 on calendar then calendar 2 should display: 07/05/11. only on the focus of the second datepicker input field will the value of the field change to the 5th and display correctly in calendar view. It should do this automatically.

Here is an example of how this is being handled

// 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

I would rewrite it a tad and do it something like this.

When a date gets selected in the #dateofchange datepicker, the minDate and maxDate options of the #EffectiveDate will get set again, based on the date the user has selected.

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

It could probably be written a bit more concise and elegant, but this should function the way you described.

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