如何通過Bootstrap DateTimePicker使用鏈接的DateTime？

Question

我有一個包含出發日期和返回日期的表格。 我想在返回日期字段中設置最小日期為所選出發日期的日期。 我已經將id放在div標簽或input標簽中，但是沒有任何效果。 你知道為什么嗎？

<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Departure<span class="required"> *</span></label>
    <div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_departure1" data-link-field="dtp_input1">
        <input class="form-control pull-right" size="16" type="text" value="" readonly required>
        <input type="hidden" id="dtp_input1"  name="res_departure" value="" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Return<span class="required"> *</span></label>
    <div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_return1" data-link-field="dtp_input2">
        <input class="form-control pull-right"  size="16" type="text" value="" readonly required>
        <input type="hidden" id="dtp_input2" name="res_return" value="" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
      </div>
</div>

這是我的js

$('.form_datetime').datetimepicker({
    //language:  'fr',
    format: "yyyy-mm-dd hh:ii",
    autoclose: true,
    todayBtn: true,
    startDate: new Date
});

$("#res_departure1").on("dp.change", function (e) {
    $('#res_return1').data("DateTimePicker").setMinDate(e.date);
});

Answer 1

$('#res_departure1').datetimepicker().on('changeDate', function(ev) {
    var departureDate = ev.date;
    $('#res_return1').datetimepicker('setStartDate', departureDate);
});

$('#res_return1').datetimepicker().on('changeDate', function(ev) {
    var returnDate = ev.date;
    $('#res_departure1').datetimepicker('setEndDate', returnDate);
});

Answer 2

試試這個代替你的代碼

$('.form_datetime').datetimepicker({
    //language:  'fr',
    format: "yyyy-mm-dd hh:ii",
    autoclose: true,
    todayBtn: true,
    startDate: new Date()
});

$("#res_departure1").on("dp.change", function (e) {
   $('#res_return1').data('DateTimePicker').minDate(new Date(e.timeStamp));
});

Answer 3

因為僅在談論日期時，最好在jQuery ui庫上使用datepicker ，然后可以使用出發日期的onSelect事件，然后設置返回日期的最小日期字段。

  onSelect: function(selectedDate)
  {
    $('#return').datepicker('option', 'minDate', selectedDate);
  }

您可以在這里查看工作提琴。