如何验证从>到日历的DateTime？

Question

我已经安装并配置了amsul DateTimePicker，并且正在尝试从>构建一个DateTimePicker类型。诸如入住和退房之类的东西。

如果您在“发件人”字段中选择任何日期和时间，则很明显“发件人”字段中的日期和时间晚于“发件人”字段。

我在某种程度上已经做到了这一点，但是唯一的问题是“选择”时间。因此，例如，如果您在“ FROM”字段中选择2019年5月9日作为日期，选择08:00作为时间。尝试选择2019年5月9日作为日期，并且列表中的可用时间至少应为08:30，因为您不能只是将日期和时间设置为相同的时间。

我该如何实现？请在下面找到我的代码段：

Amsul：https://amsul.ca/pickadate.js/date/

checkInDateSet = checkInTimeSet = checkOutDateSet = checkOutTimeSet = false;

// Check-in
$('#datepickerCheckin-span').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $('.datepickerCheckin').click();
});

$('#timepickerCheckin-span').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $('.timepickerCheckin').click();
});

var now = new Date();
var timestamp = new Date(now.getFullYear(), now.getMonth(), now.getDate()) / 1;

// CheckIn DatePicker
$('.datepickerCheckin').pickadate({
 onRender: function() {
      $('div.picker__day--highlighted').each(function(index, value) {
          if ($(this).data('pick') !== timestamp) {
              $(this).removeClass('picker__day--highlighted');
          }
      });
  },
  onSet: function() {
    checkInDatePicker = this;
    if (checkInDatePicker.get('value') !== "") {
      checkInDatePicker.close();
      $('.timepickerCheckin').click();
      checkInDateSet = true;
      $('#datepickerCheckin-span').html(checkInDatePicker.get('value'));
    } else {
      // Clear All values
      checkInDateSet = false;
      $('#datepickerCheckin-span').html('Check-In');
      $('.timepickerCheckin').trigger('change');
    }
  },
  format: 'dd mmm, yyyy',
  today: '',
  clear: '',
  close: '',
  min: true,
  max: +365,
  closeOnSelect: true
});

// CheckIn TimePicker
$('.timepickerCheckin').pickatime({
  onSet: function() {
    checkInTimePicker = this;
    if (checkInDateSet && checkInTimePicker.get('value') !== "") {
      // Attach the String
      $('#timepickerCheckin-span').html(' at ' + checkInTimePicker.get('value'));
      checkInTimePicker.close();
      checkInTimeSet = true;
    } else {
      // Do Nothing
      $('#timepickerCheckin-span').html('');
      checkInTimeSet = false
    }
  },
  clear: '',
  format: 'HH:i'
});

// Check-Out
$('#datepickerCheckout-span').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $('.datepickerCheckout').click();
});

$('#timepickerCheckout-span').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $('.timepickerCheckout').click();
});


// CheckOut DatePicker
$('.datepickerCheckout').pickadate({
   onRender: function() {
      $('div.picker__day--highlighted').each(function(index, value) {
          if ($(this).data('pick') !== timestamp) {
              $(this).removeClass('picker__day--highlighted');
          }
      });
  },
  onSet: function() {
    checkOutDatePicker = this;
    if (checkOutDatePicker.get('value') !== "") {
      checkOutDatePicker.close();
      $('.timepickerCheckout').click();
      checkOutDateSet = true;
      $('#datepickerCheckout-span').html(checkOutDatePicker.get('value'));
    } else {
      // Clear All values
      checkOutDateSet = false;
      $('#datepickerCheckout-span').html('Check-Out');
      $('.timepickerCheckout').trigger('change');
    }
  },
  onOpen: function() {
    checkOutDatePicker = this;
    if (checkInDateSet == true) {
      checkOutDatePicker.set('min', $('.datepickerCheckin').val());
    }
  },
  format: 'dd mmm, yyyy',
  today: '',
  clear: '',
  close: '',
  min: true,
  max: +365,
  closeOnSelect: true
});

// CheckOut TimePicker
$('.timepickerCheckout').pickatime({
  onSet: function() {
    checkOutTimePicker = this;
    if (checkOutDateSet && checkOutTimePicker.get('value') !== "") {
      // Attach the String
      $('#timepickerCheckout-span').html(' at ' + checkOutTimePicker.get('value'));
      checkOutTimePicker.close();
      checkOutTimeSet = true;
    } else {
      // Do Nothing
      $('#timepickerCheckout-span').html('');
      checkOutTimeSet = false
    }
  },
  onOpen: function() {
  	checkInTimePicker = this;
    if(checkInTimeSet == true) {
      checkInTimePicker.set('min',$('.timepickerCheckin').val())
    }
  },
  clear: '',
  format: 'HH:i'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<div class="checkIn-div">
  <label>Checkin: </label>
  <div>
    <span class="span-boxed" id="datepickerCheckin-span">Check-In</span>
    <span id="timepickerCheckin-span"></span>
  </div>
  <input type="text" class="datepickerCheckin" style="visibility: hidden;">
  <input type="text" class="timepickerCheckin" style="visibility: hidden;">
</div>
<div class="checkOut-div">
  <label>Checkout</label>
  <div>
    <span class="span-boxed" id="datepickerCheckout-span">Check-Out</span>
    <span id="timepickerCheckout-span"></span>
  </div>
  <input type="text" class="datepickerCheckout" style="visibility: hidden;">
  <input type="text" class="timepickerCheckout" style="visibility: hidden;">
</div>