jQuery UI Datepicker - onSelect 获取选定日期+3天答案

【问题标题】：jQuery UI Datepicker - onSelect get the selected date +3 daysjQuery UI Datepicker - onSelect 获取选定日期+3天
【发布时间】：2012-05-10 08:25:47
【问题描述】：

我尝试使用 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);
                }
            }
        );
    }
);

注意：我使用 live 和 focus 事件，因为我的所有页面内容都是通过 AJAX 调用加载的。也许这对或错，但这不是我想在这里问的；）

上面的代码对我来说是正确的并且工作正常，但我喜欢做的是设置'end_date'元素的值选择一个+3天。

到目前为止，当我在“start_date”元素中选择一个日期时，“end_date”元素会更改为与“start_date”相同的日期，这就是我想要更改的。 “end_date”将比“start_date”元素加3天。

我该怎么做？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

将 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);
}

【讨论】：

【解决方案2】：

嗨演示 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

<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>

【讨论】：

感谢分享这个@Tats_innit

【解决方案3】：

如果月 = 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";
      }                           
    }
  }
}

    <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">

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

【讨论】：