时间戳

首页 > 解决方案 > 如何根据先前的日期输入使用 Bootstrap 4 日期/时间选择器设置 minDate？

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

问题描述

我正在建立一个将事件开始和结束日期/时间添加到数据库的网站。我想根据上一个事件开始的输入动态设置 minDate （结束日期/时间）。

我正在为我的日期/时间选择器和引导程序 4使用https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html 。

<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）中获取值？

标签： javascriptbootstrap-4datetimepickermindate

解决方案

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

试试

推荐阅读