Bootstrap-datetimepicker添加天数

Question

当我选择要添加多少天的"From“date然后" days”时，它如何自动输出" to“日期上的日期？

这是我的项目的一张照片。"To“的输出必须为2017年6月6日

​

​

我正在使用Eonasdan的Bootstrap-datetimepicker：Link here

这是我的代码：

index.chtml

<div class="row">
    <label class="col-md-2 control-label">From:</label>
    <div class="col-md-10">x
        <div class="input-group date" id="dpFrom">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

<div class="row">
    <label class="col-md-2 control-label">Days:</label>
    <div class="col-md-10">
        <input id="txtDays" type="text" class="form-control">
    </div>
</div>

<div class="row">
    <label class="col-md-2 control-label">To:</label>
    <div class="col-md-10">
        <input id="txtTo" type="text" class="form-control" disabled>
    </div>
</div>

Javascript：

$('#dpFrom').datetimepicker({
    format: 'MM/DD/YYYY'
});

Answer 1

您需要定义要在第一个日期框中的onChange事件上调用的函数。您将日期作为参数传递给该日期，然后在函数中将该日期加上5天，并使用jQuery输出目标结束日期。

Answer 2

dp.change：日期更改时触发。

参数：

E={

date，//选取器更改为的日期。类型: moment object (clone) oldDate //上次日期。类型: moment对象(克隆)，如果为null，则为false

}

使用事件对象中包含的date参数以及moment方法format和add days，您可以编写：

​

$('#dpFrom').datetimepicker({
  format: 'MM/DD/YYYY'
}).on('dp.change', function(e) {
  //
  // on date change get current date and add txtDays days
  //
  var txtTo = e.date.add(+$('#txtDays').val() || 0, 'days');
  //
  // format result and save to txtDays
  //
  $('#txtTo').val(txtTo.format('MM/DD/YYYY'));
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>


<div class="row">
    <label class="col-md-2 col-xs-2 control-label">From:</label>
    <div class="col-md-10 col-xs-10">
        <div class="input-group date" id="dpFrom">
            <input type="text" class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

<div class="row">
    <label class="col-md-2 col-xs-2 control-label">Days:</label>
    <div class="col-md-10 col-xs-10">
        <input id="txtDays" type="text" class="form-control" value="5">
    </div>
</div>

<div class="row">
    <label class="col-md-2 col-xs-2 control-label">To:</label>
    <div class="col-md-10 col-xs-10">
        <input id="txtTo" type="text" class="form-control" disabled>
    </div>
</div>

​