Bootstrap3 日期选择器 - select 上的日期更改

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_in 日期时，我想将 check_out 日期更改为 check_in 日期后 1 天。

我还想禁用今天的上一个日期。

这是我的 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 and maxDate for this whatever date it is choose on the first will change the other this on combination with the dp.change 个事件：

如果选择 24-02-18 结束日期，那么根据我对您的了解，开始日期最大日期将为 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>

Bootstrap3 日期选择器 - select 上的日期更改

Bootstrap3 datepicker - date change on select

jquery

twitter-bootstrap-3

bootstrap-datepicker