JSFiddle - React, Tailwind, and code Playground

by Jithin Raj P R

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<input type="text" id="delivery_calender_lite" name="delivery_calender_lite" class="delivery_calender_lite datepicker" style="cursor: text!important;margin-bottom:10px;" readonly/>

<select id="delivery-hours" class="delivery-hours" name="delivery_hour">
  <option value="0">'.__("Choose an hour").'</option>
  <option value="10am-1pm">10AM-1PM</option>
  <option value="1pm-4pm">1PM-4PM</option>
  <option value="4pm-7pm">4PM-7PM</option>
  <option value="7pm-10pm">7PM-10PM</option>

</select>

JavaScript

$('.datepicker').datepicker();


$('body').on('change', '#delivery-hours', function() {
  var valDate = Date.parse($('#delivery_calender_lite').val()),
    valH = $(this).val(),
    valHour = valH.split('-'),
    ogH = parseInt(valHour[0])
  date = new Date(),
    dt = new Date(valDate);
  if (ogH < 10) {
    ogH = 12 + ogH
  }
  var H = dt.setHours(ogH),
    M = dt.setMinutes(00),
    S = dt.setSeconds(00),
    MLS = dt.setMilliseconds(00);
  console.log(dt - date)
  if (dt >= date) {
    alert('yes');
  } else {
    alert('Time slot is not available');
    $(this).val('0');
  }
});