Question

我正在使用bootstrap datetimepicker，如何在datetimepicker bootstrap minDate中添加一天？

我希望将minDate过滤1天以上。例如，我的checkIn datetimepicker是02/16/18，那么在checkOut datetimepicker中禁用了02/16/18的日期。

<script>
    $(function () {
        $('#CheckIn').datetimepicker({
            format: 'MM/DD/YYYY'
        });
        $('#CheckOut').datetimepicker({
            useCurrent: false,//Important! See issue #1075
            format: 'MM/DD/YYYY'
        });

        $("#CheckIn").on("dp.change", function (e) {
            $('#CheckOut').data("DateTimePicker").minDate(e.date);
        });

        $("#CheckOut").on("dp.change", function (e) {
            $('#CheckIn').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>

Answer 1

正如文档所说，dp.change：

更改日期时触发。

参数：

e = {
  date, //date the picker changed to. Type: moment object (clone)
  oldDate //previous date. Type: moment object (clone) or false in the event of a null
}

由于e.date是一个时刻对象，您可以使用add方法。

这是一个实例：

$(function () {
  $('#CheckIn').datetimepicker({
    format: 'MM/DD/YYYY'
  });
  $('#CheckOut').datetimepicker({
    useCurrent: false,//Important! See issue #1075
    format: 'MM/DD/YYYY'
  });

  $("#CheckIn").on("dp.change", function (e) {
    if( e.date ){
      e.date.add(1, 'day');
    }
    $('#CheckOut').data("DateTimePicker").minDate(e.date);
  });

  $("#CheckOut").on("dp.change", function (e) {
    $('#CheckIn').data("DateTimePicker").maxDate(e.date);
  });

});

<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='col-sm-6'>
  <div class="form-group">
    <div class='input-group date' id="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="CheckOut">
      <input type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

Answer 2

感谢您的大力帮助。它也对我有用。但是我需要增加3天。如果有人需要我的代码，请使用它。

        $(function (){
        $('#datetimepicker1_1').datetimepicker({
        minDate: new Date(),
        date: new Date()
        });
        var endDate = new Date();
        endDate.setDate(endDate.getDate()+4);
        $('#datetimepicker2_1').datetimepicker({
        minDate:endDate,
        date: endDate
        });
        $("#datetimepicker1_1").on("dp.change", function (e){
        if (e.date){
        e.date.add(4,'day');
        }
       $('#datetimepicker2_1').data("DateTimePicker").minDate(e.date);
        });
        });

<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>



    <input onkeyup="first_step_val()" maxlength="100" id='datetimepicker1_1'  type="text" name="start_date" required="required" class="form-control" />

    <input onkeyup="first_step_val()" maxlength="100" type="text" id='datetimepicker2_1' name="end_date" required="required" class="form-control"  />

Bootstrap datetimepicker添加1天注意

2 个答案: