Bootstrap-datetimepicker 添加天数答案

【问题标题】：Bootstrap-datetimepicker add daysBootstrap-datetimepicker 添加天数
【发布时间】：2017-06-21 16:56:49
【问题描述】：

当我选择“从”日期然后选择“天”添加多少天时，它如何自动输出“到”日期的日期？

这是我的项目的图片。 “To”的输出必须是 06/06/2017

我正在使用 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'
});

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

}

使用事件对象中包含的date参数和时刻方法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>

【讨论】：