datetimepicker startDate endDate控件

Question

开始日期不能晚于结束日期。这很有效。

但是，当首次选择结束日期时，可以选择开始日期到以后的日期。我不想要这个。

我该怎么控制呢？

我们使用asp.Net / Webform。我无法正确粘贴c＃代码。因此，Snipped无法正常工作。

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

从您的代码示例中我看不到对第二个数据槽的事件更改的任何处理，您需要为您的目的处理该事件。我raccomand你使用jQuery事件“dp.change”为datapicker，像这样：

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

我做了一个example on jsFiddle澄清。