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

从您的代码示例中，我看不到第二个数据选择器的事件更改有任何处理，您也需要为该目的处理该事件。我建议您将jQuery事件“ dp.change”用于数据选择器，如下所示：

  $('#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的澄清。

datetimepicker startDate endDate控件

1 个答案: