如何使用Bootstrap 4日期/时间选择器根据以前的日期输入设置minDate？

Question

我正在建立一个网站，将事件开始和结束日期/时间添加到数据库中。我想根据前一个事件开始的输入动态设置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（如上所述），但不确定如何使用“onblur”从以前的文本输入（datepicker1）中获取值？

Answer 1

文档中清楚地说明了您问题的答案https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html

基本上，您可以通过在第一个datetimepicker上设置事件监听器来动态设置第二个datetimepicker的minDate，该监听器在用户选择第一个datetime时触发事件。

<代码>$（'datetimepicker1'）。datetimepicker（…您的选项…）。在（“dp.change”上，函数（e）{//在日期更改时激发//获取日期时间值console.log（e.target.value）；}）

然后，您可以使用以下API函数重置第二个datetimepicker的minDate：

<代码>//接受minDate字符串、Date、moment、boolean:false参数，并禁止用户选择该时刻之前的时刻。如果向选项传递了布尔值：false。minDate参数已清除，用户可以选择的最小时间没有限制$（“#datetimepicker2”）。数据（“DateTimePicker”）。minDate（minDate）

Answer 2

您可以像这样调用datetime api方法

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

并调用api动态

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

有一个尝试