Question

编辑：得到解答。

有些专家可以帮助我使用javascript代码吗？

我有使用bootstrap3的eternicode Datepicker（点击选择日期时有效） https://github.com/eternicode/bootstrap-datepicker/tree/bs3

但现在我有两个约会，Checkin和Checkout，我想：选择结帐时，它会禁用日期＆lt; = Checkin。选择签入时，如果是签出后，请将签出更改为选中签入后的第+1天。

我有一些HTML和JavaScript代码，但它不能很好地工作：当我选择签入时，结帐日是今天，必须选中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');

Answer 1

<强>溶液：与eternicode datepicker bs3分支一起使用的脚本（checkin checkout）

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();

eternicode Datepicker和Bootstrap3签入结账

1 个答案: