datetimepicker startDate endDate control

Question

The start date can not be later than the end date. This is working.

But, when the end date is first selected, the start date can be selected to a later date. I don't want this.

How can I control this?

We use asp.Net / Webform. I could not paste the c # code here correctly. Snipped is not working properly because of this.

$('#<%=dtEduStart.ClientID%>').datetimepicker({
  format: 'dd.M.yyyy',
  weekStart: 1,
  todayBtn: 0,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0,
  todayBtn: 1,
  endDate: '+0d',
}).on('changeDate', function(selected) {
  var minDate = new Date(selected.date.valueOf());
  $('#<%=dtEduFinish.ClientID%>').datetimepicker('setStartDate', minDate);
});

$('#<%=dtEduFinish.ClientID%>').datetimepicker({
  format: 'dd.M.yyyy',
  weekStart: 1,
  todayBtn: 0,
  autoclose: 1,
  todayHighlight: 1,
  startView: 2,
  minView: 2,
  forceParse: 0,
  todayBtn: 1,
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-6">
  <label>Starting Date<span class="red bolder">*</span></label>
  <div id='divEduStart' runat="server">
    <div class="input-group date form_date">
      <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
      <input id="dtEduStart" runat="server" type="text" class="form-control dtpStart" data-placeholder="Starting Date" readonly /></div>
    <span id="spnEduStart" runat="server"></span></div>
</div>

<div class="form-group col-md-6">
  <label>Graduation Date<span class="red bolder">*</span></label>
  <div id="divEduFinish" runat="server">
    <div class="input-group date form_date">
      <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
      <input id="dtEduFinish" runat="server" type="text" data-placeholder="Graduation Date" class="form-control dtpEnd" readonly /></div>
  </div>
  <span id="spnEduFinish" runat="server"></span>
</div>

Answer 1

From your code example I don't see any handling for the event change of the second datapicker, you need to handle that event too for your purpose. I raccomand you to use the jQuery event "dp.change" for the datapicker, like this:

  $('#dtEduStart').on('dp.change', function(e) {    
    $('#dtEduFinish').data("DateTimePicker").minDate(e.date);
  });
  $('#dtEduFinish').on('dp.change', function(ev) {
    $('#dtEduStart').data("DateTimePicker").maxDate(ev.date);
  });

I've made an example on jsFiddle to clarify.