如何通过Bootstrap DateTimePicker使用链接的DateTime？

Question

I have a form which contains Departure date and return date. And I want to set the minimum date in the return date field is the date of selected departure date. I already put the id in div tag or input tag, but nothing worked. Do you know why?

<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>

This is my 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

Try this instead of your code

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

Because when you are talking about date only, then better to use datepicker on jQuery ui library, and then you can use the onSelect event of the departure date and then set the min date of return field.

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

you can check the working fiddle here.