2011-02-01 158 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

相关问题