eternicode Datepicker 和 Bootstrap3 checkin checkout答案

【问题标题】：eternicode Datepicker and Bootstrap3 checkin checkouteternicode Datepicker 和 Bootstrap3 checkin checkout
【发布时间】：2013-11-20 18:40:38
【问题描述】：

编辑：得到答案。

有专家可以帮我编写javascript代码吗？

我有 eternicode Datepicker 与 bootstrap3 一起工作（点击选择日期时它工作） https://github.com/eternicode/bootstrap-datepicker/tree/bs3

但是现在我有两个日期，Checkin 和 Checkout，我想：选择结帐时，它会禁用天数

我有一些 html 和 javascript 代码，但效果不佳：当我选择checkin的时候，checkout day就是今天这一天，一定要选checkin+1day。当我选择结帐时，它只禁用当天之前的日子，只有当我选择签到日之后的一天时才有效。

结帐的setValue似乎有问题。

html 代码（输入）：

    <div class="form-group">
    <label for="DtChkIn">Data Checkin</label>
        <div class="input-group date" id="dp1">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input type="text" class="form-control input-sm" id="DtChkIn" placeholder="Data CheckIn" readonly="readonly">
        </div>
</div>
<div class="form-group">
    <label for="DtChkOut">Data Checkout</label>
        <div class="input-group date" id="dp2">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input type="text" class="form-control input-sm" id="DtChkOut" placeholder="Data CheckOut" readonly="readonly">
        </div>
</div>

还有 javascript：

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dp1').datepicker({
    language: "pt",
    format: "dd/mm/yyyy",
    beforeShowDay: function (date) {
        return date.valueOf() < now.valueOf() ? false : '';
    }
}).on('changeDate', function (ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        var newDate = new Date(ev.date);
        newDate.setDate(newDate.getDate() + 1);

        checkout.setValue(newDate);
    }

    checkin.hide();
    $('#DtChkOut').focus();
}).data('datepicker');

var checkout = $('#dp2').datepicker({
    language: "pt",
    format: "dd/mm/yyyy",
    beforeShowDay: function (date) {
        return date.valueOf() <= checkin.date.valueOf() ? false : '';
    }
}).on('changeDate', function (ev) {
    checkout.hide();
}).data('datepicker');

【问题讨论】：

嗨，Marcio，我偶然发现了您的问题，发现您自己找到了解决方案。请将您的解决方案添加为答案并接受它，以便人们可以立即看到您的问题有一个有效的答案。谢谢！
已将解决方案移至 answer.done！ :)

标签： jquery datepicker twitter-bootstrap-3 checkout checkin

【解决方案1】：

解决方案： 与 eternicode datepicker bs3 分支一起使用的脚本（签入签出）

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dp1').datepicker({

    beforeShowDay: function (date) {
        return date.valueOf() >= now.valueOf();
    }
}).on('changeDate', function (ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        checkout.setValue(newDate);
        checkout.setDate(newDate);
        checkout.update();
    }
    checkin.hide();
    $('#dp2')[0].focus();
}).data('datepicker');
var checkout = $('#dp2').datepicker({
    beforeShowDay: function (date) {
        return date.valueOf() > checkin.date.valueOf();
    }
}).on('changeDate', function (ev) {
    checkout.hide();
}).data('datepicker');

在与结帐日期比较之前，请注意添加到更新签入日期的行：

   checkout.setDate(newDate);
   checkout.update();

【讨论】：