Question

HTML

<label for="checkIn">Check in</label>
<input type="text" readonly="readonly" name="checkIn" id="checkIn"   />
<label  for="checkOut">Check out</label>
<input type="text"  readonly="readonly" name="checkOut" id="checkOut"   />

的javaScript

var dates = $( "#checkIn, #checkOut" ).datepicker({
               autoSize: true,
               minDate: "+0",
               maxDate: "+6M",
               onSelect: function( selectedDate ) {
                     var option = this.id == "checkIn" ? "minDate" : "maxDate",
                     instance = $( this ).data( "datepicker" ),
                     date = $.datepicker.parseDate(
                                 instance.settings.dateFormat 
                              || $.datepicker._defaults.dateFormat,
                                  selectedDate, instance.settings );
                    dates.not( this ).datepicker( "option", option, date );
                }
   });

现在我想要的是，只要用户为checkIn设置任何日期，checkOut就应该在所选日期的旁边以及所有其他选项。

请参阅fiddle了解相同的

我尝试了很多但没有成功。请帮助我申请什么逻辑？

Answer 1

尝试将字段分开并单独启动datepicker，然后尝试：

    $('#date1').datepicker({
        constrainInput: true, 
        dateFormat: 'D, dd M yy',
        // Once change, set date2 min date
        onSelect: function (dateText, inst) {
            $('#date2').datepicker("option", "minDate", dateText);
        }
    });

    $('#date2').datepicker({
        constrainInput: true, 
        minDate: 0,
        dateFormat: 'D, dd M yy'
    });

希望这有帮助：）

Answer 2

shennyL答案未考虑所选日期+ n。

所以：

在#checkIn上：

minDate: 0, //sets the minDate offset to 0, meaning today.
onSelect: function() {
             var date = $(this).datepicker('getDate');
             if (date) {
                  date.setDate(date.getDate() + 1);
                  $("#checkOut").datepicker("option", "minDate", date)
             }
          }

据我所知，这项工作相当不错。你可能只需要在你的小提琴上清理一些代码吗？

根据之前的datepicker日期+ 1天设置下一个datepicker实例的minDate

HTML

的javaScript

2 个答案: