Question

我的表格中有两个字段。一个用于入住日期，另一个用于退房日期。我正在使用bootstrap datepicker进行日期选择。我想要完成的是，一旦设置了登记值，最小（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()
});

现在，checkin字段的代码工作正常，但是在autclose发生后，checkout字段只是聚焦而且datepicker甚至会弹出。任何人都知道我做错了什么？提前致谢。：）

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

Bootstrap Datepicker，结帐输入＆gt;签入输入

1 个答案: