элемент datetimepicker startDate endDate - PullRequest
0 голосов
/ 30 августа 2018

Дата начала не может быть позже даты окончания. Это работает.

Но, когда дата окончания выбирается впервые, дата начала может быть выбрана позднее. Я не хочу этого.

Как мне это контролировать?

Мы используем 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>

1 Ответ

0 голосов
/ 05 сентября 2018

Из вашего примера кода я не вижу никакой обработки для изменения события второго сборщика данных, вам нужно обработать это событие также для ваших целей. Я рекомендую вам использовать событие 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);
  });

Я сделал пример для jsFiddle , чтобы уточнить.

...