jQuery UI Datepicker – onSelect获取所选日期+3天

我尝试使用jQuery UI datepicker创建一个日期范围,使用两个文本字段。 第一个文本字段“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”相同的日期,这就是我想要更改的内容。 “end_date”距离“start_date”元素+3天,用于选择。

我怎样才能做到这一点 ?

将end_date设置为+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); } 

Hiya 演示 http://jsfiddle.net/96Lbf/

此演示将设置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

 

如果month = 4,我想看car1图片。 如果月份= 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"; } } } } 

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