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" 作为数据选择器，像这样：

  $('#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 控件

datetimepicker startDate endDate control

javascript

asp.net

datepicker

datetimepicker

bootstrap-datetimepicker