jQuery UI Datepicker - onSelect獲取所選日期+3天

Question

我嘗試使用jQuery UI日期選擇器，使用兩個文本字段創建日期範圍。第一個文本字段「start_date」將設置開始日期，第二個文本字段「end_date」將設置結束日期。

我到現在的代碼是這樣的：

$('#start_date').live(
    'focus', 
    function() 
    { 
     $('#end_date').datepicker(
      { 
       dateFormat: 'dd MM yy', 
       minDate: new Date(), 
       maxDate: new Date(2012, 9, 15), 
       stepMonths: 2, 
       numberOfMonths: 2 
      } 
     ); 

     $(this).datepicker(
      { 
       dateFormat: 'dd MM yy', 
       minDate: new Date(), 
       maxDate: new Date(2012, 9, 15), 
       stepMonths: 2, 
       numberOfMonths: 2, 
       onSelect: function(dateText, inst) 
       { 
        var instance = $(this).data("datepicker"); 

        var date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings); 

        $('#end_date').datepicker('option', 'minDate', dateText); 
       } 
      } 
     ); 
    } 
); 

注意：我用的是活的和焦點事件，因爲我所有的頁面內容加載AJAX調用。也許這是正確的或錯誤的，但這不是我喜歡在這裏問的;）

上面的代碼對我來說是正確的，工作正常，但我喜歡做的，是設置的值'end_date'元素選擇一個+3天。到目前爲止，當我在「start_date」元素中選擇一個日期時，「end_date」元素變爲與「start_date」相同的日期，這就是我想要更改的內容。從「start_date」元素開始的+3天的「end_date」選擇該選項。

我該怎麼做？

Answer 1

要爲1天

onSelect: function(dateText, inst) { 
    $('#start_date').datepicker('option','minDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); 
    var toDate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);//Date one month after selected date 
    var oneDay = new Date(toDate.getTime()+86400000); 
    document.getElementById('end_date').value =$.datepicker.formatDate('dd/mm/yy', oneDay); 
} 

Answer 2

你好演示http://jsfiddle.net/96Lbf/

設置END_DATE本演示將設置to文本框+3 days服用`從日期選擇考慮。

jQuery代碼

$(function() { 
     $("#from, #to").datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 1, 
      onSelect: function(selectedDate) { 
       if(this.id == 'from'){ 
        var dateMin = $('#from').datepicker("getDate"); 
        var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); 
        var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 3); 
        //$('#to').datepicker("option","minDate",rMin); 
        //$('#to').datepicker("option","maxDate",rMax); 
$('#to').val($.datepicker.formatDate('mm-dd-yy', new Date(rMax)));      
       } 

      } 
     }); 
    }); 

的Html

<div class="demo"> 

<label for="from">From</label> 
<input type="text" id="from" name="from"/> 
<label for="to">to</label> 
<input type="text" id="to" name="to"/> 

</div>​ 

Answer 3

如果一個月= 4，我想看看CAR 1的畫面。如果月= 5，我想看car3圖片。我該怎麼做？

//.............. 
onSelect: function(selectedDate) { 
    if(this.id == 'from'){ 
    var dateMin = $('#from').datepicker("getDate"); 
    var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 0); 
    alert (rMin.getMonth()); 
    if(rMin.getMonth() == 4){ 
     var image1=new Image(); 
     image1.src="car1.jpg" 
     if(rMin.getMonth() ==5){ 
     var image2=new Image() 
     image2.src="car3.jpg"; 
     }       
    } 
    } 
} 

<label for="from">From</label> 
    <input type="text" id="from" name="from"/> 

    <label for="pics">pics</label> 
    <input type="image" 
      src="car1.jpg" 
      id="pics" 
      name="pics" 
      alt="Submit" 
      width="48" height="48"> 

...............