Question

我想再向结帐添加1天，也就是说，结束日期必须大于开始日期。

以下是我的bootstrap datepicker代码：

$(function() {

  $('#datetimepicker1').datetimepicker({
    format: 'YYYY-MM-DD',
    minDate: new Date()
  });

  $('#datetimepicker2').datetimepicker({
    format: 'YYYY-MM-DD',
    minDate: new Date($('#from_date').val())
  });

  $('#from_date').on("blur", function() {
    $('#datetimepicker2').data("DateTimePicker").destroy();
    $('#datetimepicker2').datetimepicker({
      format: 'YYYY-MM-DD',
      minDate: new Date($('#from_date').val())
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-2">
  <label for="checkin">Check-in</label>
  <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" id="from_date" name="checkin" />
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon">
     </span></span>
  </div>
</div>

<div class="form-group col-md-2">
  <label for="checkout">Check-out</label>
  <div class="input-group date" id="datetimepicker2">
    <input type="text" class="form-control" id="to_date" name="checkout" />
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon">
    </span></span>
  </div>
</div>

Answer 1

您可以这样做：

var date = new Date();
date.setDate(date.getDate() + 1);

Answer 2

许多解决方案中的一个解决方案是通过getTime以毫秒为单位获取fromDate，并为其添加1天等效milliseconds：

var fromDate = $('#from_date').val();
// To date = fromDate + 1 day 
// milliseconds = 24 hours * 60 minutes * 60 seconds * 1000
var toDateMillisecs = new Date(fromDate).getTime() + (24 * 3600 * 1000);
var toDate = new Date(toDateMillisecs);

Answer 3

只需使用片刻add方法与linked pickers结合使用，毕竟您需要包含片段库以使用选择器。

我们使用moment()和minDate将第一个选择器的maxDate设置为今天我们选择另一个选择器的日期

退房的minDate将是在第一个+1

上选择的日期

在这种情况下，我们使用选择器提供的事件来监听更改dp.change

通过这种方式，您不必一直在寻找文本框的值，并且它更容易理解。

＆＃13;

$(function() {
  let $checkIn = $('#datetimepicker1');
  let $checkOut = $('#datetimepicker2');

  $checkIn.datetimepicker({
    useCurrent: false,
    format: 'YYYY-MM-DD',
    minDate: moment()
  });

  $checkOut.datetimepicker({
    useCurrent: false,
    format: 'YYYY-MM-DD',
  });

  $checkIn.on("dp.change", function(e) {
    //Here we add a day more to the Check-out
    $checkOut.data("DateTimePicker").minDate(e.date.add(1, 'day'));
  });

  $checkOut.on("dp.change", function(e) {
    $checkIn.data("DateTimePicker").maxDate(e.date);
  });

});

＆＃13;

<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>

<div class="form-group col-md-2">
  <label for="checkin">Check-in</label>
  <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" id="from_date" name="checkin" />
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon">
     </span></span>
  </div>
</div>

<div class="form-group col-md-2">
  <label for="checkout">Check-out</label>
  <div class="input-group date" id="datetimepicker2">
    <input type="text" class="form-control" id="to_date" name="checkout" />
    <span class="input-group-addon"><span class="glyphicon-calendar glyphicon">
    </span></span>
  </div>
</div>

＆＃13;

如何在结账日期添加1天

3 个答案: