2011-02-01 155 views
4

我使用jQuery日期選擇器插件,由開爾文福(http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/),需要做到以下幾點,也許有人可以幫助我:jQuery的日期選擇器:選擇一個日期,自動更新第二場

在一個網站對於旅遊保險我有兩個日期字段,一個用於開始日期和一個結束日期。還有第三個領域(選擇)在幾天內選擇計劃,每個領域都有不同的覆蓋面。這個想法是,如果您選擇一個計劃,例如15天,並且開始日期爲X,則第二個日期字段將會神奇地填充X + 15天的日期。

事情是,我的JavaScript知識不是你所謂的高級。

任何人都有一些插件的經驗,或者至少可以給我一些指針?

非常感謝。

+0

在這裏,這樣的人你花心思。你有嘗試過什麼嗎? – switz 2011-02-01 19:52:49

+1

是的,我看了幾件事情。即插件的演示頁面,谷歌和StackOverflow上的搜索,插件的文檔等。但到目前爲止,我還沒有發現任何這樣做。只有一些可以爲第二個輸入定義範圍的示例,例如http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerStartEnd.html – Contraculto 2011-02-01 19:56:31

回答

2

也許這可以幫助


$(document).ready(function(){  
    $("#date2").datepicker(); 
    $("#date1").datepicker({ 
     onSelect: function(){ 
      var fecha = $(this).datepicker('getDate'); 
      $("#date2").datepicker("setDate", new Date(fecha.getTime())); 
      $("#date2").datepicker("setDate", "+15d"); 
     } 
    }); 
}); 

我想這是你所需要的

1

http://jqueryui.com/demos/datepicker/ ONSELECT可能是你在找什麼,當你選擇第一次約會,你可以添加15天,並填充第二場

您使用的是舊版本的日期選擇器,我認爲,你應該看看上面的鏈接上的jquery datepicker

+0

謝謝,我會研究一下。我只是使用那個,因爲這是我必須修改的網站。 (顯然我沒有做到) – Contraculto 2011-02-01 19:59:17

1

我修改了一個樣本。是這樣的:

$(function() 
{ 
    $('#start-date').bind(
     'dpClosed', 
     function(e, selectedDates) 
     { 
      var d = selectedDates[0]; 
      if (d) { 
       d = new Date(d); 
       var timeframe = $('.plan-length').val(); 
       $('#end-date').dpSetStartDate(d.addDays(timeframe).asString()); 
       $('#end-date').dpSetEndDate(d.addDays(timeframe + 1).asString()); 
      } 
     } 
    );  
}); 

其中#start-date爲起始日期輸入,.plan-length是選擇將返回該計劃將增加的天數(很明顯,我不知道您的實現,所以這肯定會改變) 。和#end-date是結束日期輸入。

編輯:我也強烈建議你看看jQuery UI的DatePicker插件,因爲它更靈活,IMO更易於使用。

編輯2:您可以設置開始和結束日期,所以它只是一個選擇。 我在上面的代碼中增加了1行。

+0

謝謝。這很接近,但顯然這個插件只能設置開始日期而不是確切的開始日期。我會研究UI插件。 – Contraculto 2011-02-01 20:15:06

相關問題