0

我正在建立一个将事件开始和结束日期/时间添加到数据库的网站。我想根据上一个事件开始的输入动态设置 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）中获取值？

4

2 回答 2

0

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

试试

于 2019-01-18T02:13:18.830 回答
0

您的问题的答案已在文档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)

于 2019-01-18T02:14:28.433 回答