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日期選擇器被選中時，#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()) 
}); 

這也許可以寫多一點簡潔大方，但這應該工作，你所描述的方式。

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