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/