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

Question

我在一页上使用了两个 jquery。 在 Document ready 中，其中一个设置为当前日期，另一个设置为当前日期 + 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日期选择器中选择日期时，将根据用户选择的日期再次设置#EffectiveDate的minDate和maxDate选项。

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

它可能会写得更简洁和优雅，但这应该 function 你描述的方式。

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