How do I set minDate using Bootstrap 4 date/time picker based on previous date input?

Question

I am setting up a website that adds event start and end dates/times to a database. I would like to dynamically set minDate (for the end date/time) based on the input from the previous event start.

I am using https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html for my date/time picker and bootstrap 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>

I can set minDate manually (as above) but not sure how to take the value from the previous text input (datepicker1) with perhaps 'onblur'?

Answer 1

you can call the datetime api methods like this

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

and call the api dynamic

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

have a try

Answer 2

The answer to your question is clearly stated on the documentation https://www.jqueryscript.net/time-clock/Date-Time-Picker-Bootstrap-4.html

Basically, you can dynamically set minDate for the second datetimepicker by setting an event listener on the first datetimepicker that fires an event whenever user select the first 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); })

Then you can reset the minDate of second datetimepicker using this API function:

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