Как установить minDate с помощью средства выбора даты / времени Bootstrap 4 на основе предыдущего ввода даты? - PullRequest
Новая
       58

Как установить minDate с помощью средства выбора даты / времени Bootstrap 4 на основе предыдущего ввода даты?

0 голосов
/ 18 января 2019

Я настраиваю веб-сайт, который добавляет дату / время начала и окончания события в базу данных. Я хотел бы динамически установить minDate (для конечной даты / времени) на основе входных данных с начала предыдущего события.

Я использую https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html для выбора даты / времени и начальной загрузки 4. 

<div class="form-group row">
  <label for="eventStart" class="col-3 col-form-label">Event start date and time</label> 
  <div class="col-5">
    <div class="input-group date" id="datetimepicker1">
      <input id="eventStart" name="eventStart" type="text" required="required" class="form-control here"> 
      <div class="input-group-addon append"><i class="fa fa-calendar"></i> 
   </div>
  </div>
</div>
  <script type="text/javascript">
    $(function () {
      $('#datetimepicker1').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
        stepping: 15
      });
    });
  </script>     
</div>

<div class="form-group row">
  <label for="eventEnd" class="col-3 col-form-label">Event end date and time</label> 
    <div class="col-5">
      <div class="input-group date" id="datetimepicker2">
        <input id="eventEnd" name="eventEnd" type="text" required="required" class="form-control here"> 
        <div class="input-group-addon append"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
  <script type="text/javascript">
    $(function () {
      $('#datetimepicker2').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
        stepping: 15,
        minDate: '2019/1/23 20:00'
        });
    });
  </script>     
</div>

Я могу установить minDate вручную (как указано выше), но не уверен, как взять значение из предыдущего ввода текста (datepicker1), возможно, с помощью 'onblur'?

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Ответ на ваш вопрос четко указан в документации https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html

По сути, вы можете динамически установить minDate для второго указателя даты и времени, установив прослушиватель события на первый указатель даты и времени, который запускает событие всякий раз, когда пользователь выбирает первое время даты.

$('#datetimepicker1').datetimepicker(... your options ...).on( "dp.change", function(e) { // Fired when the date is changed. // Get the datetime value console.log(e.target.value); })

Затем вы можете сбросить minDate второго datetimepicker, используя эту функцию API:

// Takes a minDate string, Date, moment, boolean:false parameter and disallows the user to select a moment that is before that moment. If a boolean:false value is passed the options.minDate parameter is cleared and there is no restriction to the miminum moment the user can select. $('#datetimepicker2').data("DateTimePicker").minDate(minDate)

0 голосов
/ 18 января 2019

Вы можете вызывать методы API datetime, как этот 

    $('#datetimepicker').data("DateTimePicker").minDate('2019/1/23')

и вызовите API динамический 

    $('#datetimepicker1').on('change',function(){
         var newdate=$(this).val();
         if(newdate){
             $('#datetimepicker2').data("DateTimePicker").minDate(newdate)
         }
    });

попробуйте

...