引导日期选择器，结帐输入>签入输入

Question

我的表单中有两个字段。一个用于入住日期，另一个用于退房日期。我正在使用 [bootstrap datepicker][1] 进行日期选择。我想要实现的是，一旦设置了签入值，minimal(startDate) 签出值将是签入值 + 1 天。这是我当前的代码：

HTML：

        <form id="homeBookForm">
        <div class="inner-addon right-addon">
            <i class="fa fa-calendar" aria-hidden="true" id="checkInIcon"></i>
            <input type="text" class="form-control checkIn" 
            placeholder="Check-In">
        </div>
        <div class="inner-addon right-addon">
            <i class="fa fa-calendar" aria-hidden="true" id="checkOutIcon"></i>
            <input type="text" class="form-control checkOut" placeholder="Check-Out">
        </div>
        <button>Book Now</button>
    </form>

JS：

var date = new Date();
$('.checkIn').datepicker({
    format:'yyyy-mm-dd',
    todayBtn:true,
    autoclose:true,
    startDate:date
}).on('blur',function(){
    $('.checkOut').focus();
});
$('.checkOut').datepicker({
    format:'yyyy-mm-dd',
    todayBtn:true,
    autoclose:true,
    startDate:$('.checkIn').val()
});

现在检查字段的代码工作正常，但是在自动关闭发生后，结帐字段只是集中并且日期选择器甚至没有弹出。有人知道我做错了什么吗？提前致谢。 :) [1]：http://bootstrap-datepicker.readthedocs.io/en/latest/index.html

Answer 1

您可以使用日期选择器的changeDate 事件来实现您想要的一切。 尝试将您当前的实现更改为此

var date = new Date();
$(".checkIn").datepicker({
    format: "yyyy-mm-dd",
    todayBtn: true,
    autoclose: true,
    startDate: date
  })
  .on("changeDate", function(e) {
    var checkInDate = e.date, $checkOut = $(".checkOut");
    checkInDate.setDate(checkInDate.getDate() + 1);
    $checkOut.datepicker("setStartDate", checkInDate);
    $checkOut.datepicker("setDate", checkInDate).focus();
  });

$(".checkOut").datepicker({
  format: "yyyy-mm-dd",
  todayBtn: true,
  autoclose: true
});

您不再需要 blur 事件，因为日期选择器的 changeDate 事件将负责将焦点设置到您的结帐日期选择器。

在这里查看演示 https://codepen.io/anon/pen/ZrByVp?editors=1010