JSFiddle - React, Tailwind, and code Playground

by Louys Patrice Bessette

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                    <input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
            </div>
        </div>
        
        <div class='col-sm-6'>
            <div class="form-group">
                <input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
            </div>
        </div>
    </div>
</div>

JavaScript

$(function () {
  console.clear();

  $('#datepicker').datetimepicker({
    minDate: moment().add(300, 'm').startOf("day")
  })
    .val(moment().add(300, 'm').format("DD-MM-YYYY"))   // To set correct "valid" date from start

    .on('dp.change', function(e){
    var now = moment().format("X");
    //console.log(e.date.format("X"));
    //console.log(now);

    // Comparing selected date (moment object) in milliseconds
    if(e.date.format("X")+(300*60*1000) > now ){
      console.log("above 5 hours, unlocking time.");
      $('#timepicker').data("DateTimePicker").minDate(false);
    }else{
      console.log("below 5 hours, locking time (and probably resetting the value to min...)");
      $('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));
    }

  });

  $('#timepicker').datetimepicker({
    minDate: moment().add(300, 'm'),
  })
    .on('focus', function(e){
    if( $(this).val() == "" ){
      $(this).data("DateTimePicker").minDate(moment().add(300, 'm'));
    }
  });

  $('#datepicker').val("");
  $('#timepicker').val("");
});