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

您可以像这样调用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)
         }
    });

尝试一下

Answer 2

文档https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html

中明确说明了您的问题的答案

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

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

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

// 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)

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

2 个答案: