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>