Bootstrap-datetimepicker添加天

Question

当我选择要添加多少天的“开始”日期然后选择“天数”时，如何自动在“到”日期上输出日期？

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

我正在使用Eonasdan的Bootstrap-datetimepicker： 在此处链接

这是我的代码：

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事件上调用的函数。 您将日期作为参数传递给该日期，然后在函数中向该日期添加五天，并使用jQuery输出目标结束日期。

Answer 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参数和moment方法格式化并添加天数，您可以编写：

 $('#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>