Bootstrap3 datepicker - 选择

Question

这是我的HTML

<div class="col-md-2 col-sm-2 b-right">
    <div class="element-set">
          <div class="input-group date" id="hotel_checkin">
                <label>Check-Out Date</label>
                 <input class="input-group-addon" type="text" name="check_in" id="check_in" type="text">
          </div>
     </div>
</div>
<div class="col-md-2 col-sm-2 b-right">
     <div class="element-set">
         <div class="input-group date" id="hotel_checkout">
            <label>Check-in Date</label>
            <input class="input-group-addon" type="text" name="check_out" id="check_out" type="text">
        </div>
     </div>
</div>

我有两个文字字段check_in和check_out

我想将check_out日期更改为check_in日期后{1}}日期，当我选择check_in日期时。

此外，我想从今天开始禁用上一个日期。

这是我的jQuery代码

$(function () {
    $('#hotel_checkin').datetimepicker({ format: 'DD-MM-YYYY' });
    $('#hotel_checkout').datetimepicker({
        format: 'DD-MM-YYYY',
        useCurrent: false 
    });
    $("#hotel_checkin").on("dp.change", function (e) {
        $('#hotel_checkout').data("DateTimePicker").minDate(e.date);
        $('#hotel_checkin').data("DateTimePicker").minDate(e.date);

    });
    $("#hotel_checkout").on("dp.change", function (e) {

        var sdate = $("#check_in").val();
        var edate = $("#check_out").val();
        if(sdate==edate) {
            $('#check_out').addClass("error");
            $("#check_out").val('');
        }           
    });
});

Answer 1

使用minDate和maxDate，无论在第一个日期选择哪个日期，都会使用dp.change事件更改另一个日期：

如果选择结束日期为24-02-18，则根据我的理解，开始日期maxdate将为23-02-18。

$(document).ready(function() {
  let $checkin = $('#hotel_checkin');
  let $checkout = $('#hotel_checkout');

  $checkin.datetimepicker({
    format: 'DD-MM-YYYY',
    minDate: moment(),
    useCurrent: false
  });

  $checkout.datetimepicker({
    format: 'DD-MM-YYYY',
    minDate: moment().add(1, 'day'),
    useCurrent: false, //Important! See issue #1075
  });

  $checkin.on("dp.change", function(e) {
    //in case date is cleaned away, to avoid errors
    if (e.date) {
      $checkout.data("DateTimePicker").minDate(e.date.add(1, 'day'));
    }
  });

  $checkout.on("dp.change", function(e) {
    //in case date is cleaned away, to avoid errors
    if (e.date) {
      $checkin.data("DateTimePicker").maxDate(e.date.add(-1, 'day'));
    }
  });

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<br/>
<div class='col-sm-6'>
  <div class="form-group">
    <div class='input-group date' id="hotel_checkin">
      <input type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

<div class='col-sm-6'>
  <div class="form-group">
    <div class='input-group date' id="hotel_checkout">
      <input type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>