2012-03-02 64 views
2

這似乎是一件簡單的事情,但我無法解決它,我真的需要這個。 如何通過SelectedDate事件將日期添加到所選日期?jQuery UI - 添加日期到選定的日期

我需要在2個datepickers執行的日期範圍的限制。一旦用戶設置了一個日期選擇器,另一個需要只允許日期等於第一個日期選擇器的選定日期加上一個月。

示例:如果我在第一日曆中設置「3月3日」,第二必須允許僅日期不是「4月3日」更大。

所以到現在爲止,我只能得到相同選擇的日期或者一個我通過$('#dtpicker').datepicker("setDate" , '+1m');設置。我嘗試了jquery-ui文檔示例,但沒有任何結果。

+0

你看過http://jqueryui.com/demos/datepicker/#date-range的例子嗎?似乎做你想做的事。 – j08691 2012-03-02 15:52:37

+0

對不起,但正如我所說,它沒有奏效。該示例僅限制所選日期,而不是所選日期加上一個月。 – AdrianoRR 2012-03-02 15:59:45

回答

1

我已經在兩個日期選擇器上實現了類似的功能。

function handleDateChange() { 
    var dateStart = $('#datepicker-startdate').datepicker("getDate"), 
     dateEnd = $('#datepicker-enddate').datepicker("getDate"); 
    if (dateStart !== null) { 
     dateStart.setDate(dateStart.getDate() + 1); 
     $('#datepicker-enddate').datepicker('option', 'minDate', dateStart); 
    } 
    if (dateEnd !== null) { 
     dateEnd.setDate(dateEnd.getDate() - 1); 
     $('#datepicker-enddate').datepicker('option', 'maxDate', dateEnd); 
    } 
} 

使用此方法在onSelect處理您的datepickers的(如init選項):

$(/*your datepicker selector*/).datepicker({ 
    // ... other init options 
    onSelect : function(dateText, inst) {handleDateChange();} 
}); 

我認爲這是類似於你所需要的,如果不是那麼它一定要得到你的正確的軌道上。

+0

嘿,謝謝!正如你所說,它絕對讓我走上正軌。你只是誤解了一點點,因爲沒有必要限制'#datepicker-enddate'的maxDate,只是minDate。我剛剛調整了'dateStart.setDate(dateStart.getDate()+ 1)'到'dateStart.setDate(dateStart.getDate()+ 30)'這一段, – AdrianoRR 2012-03-03 15:23:18

5

這應該爲你做的伎倆:

var plus_one_month = ''; 
var minus_one_month = ''; 
$("#from").datepicker({ 
    beforeShow: function() { 
     if($("#to").val() != '') { 
      minus_one_month = new Date($("#to").val()); 
      minus_one_month.setMonth(minus_one_month.getMonth() - 1); 
     } else { 
      minus_one_month = ''; 
     } 
     return { 
      minDate: minus_one_month, 
      maxDate: new Date($("#to").val()) 
     } 
    } 
}); 

$("#to").datepicker({ 
    beforeShow: function() { 
     if($("#from").val() != '') { 
      plus_one_month = new Date($("#from").val()); 
      plus_one_month.setMonth(plus_one_month.getMonth() + 1); 
     } else { 
      plus_one_month = ''; 
     } 
     return { 
      minDate: new Date($("#from").val()), 
      maxDate: plus_one_month 
     } 
    } 
}); 

正如你可以看到here

+0

我想你誤解了我想要的。一旦用戶從'#from'日期選擇器中選擇了一個數據,則'#到'日期選擇器的minDate將是'#from' datepicker + 1個月的選定日期。無論如何,你的回答給了我新的方法來解決這個問題,所以謝謝。 – AdrianoRR 2012-03-03 14:48:53

相關問題