JSFiddle - React, Tailwind, and code Playground

by Pamela J

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
<input type="text" id="time" value="" class="time" />

JavaScript

d = Date.now();
d = new Date(d);
d = (d.getHours() > 12 ? d.getHours() - 12 : d.getHours()) + ':' + d.getMinutes() + ' ' + (d.getHours() >= 12 ? "PM" : "AM");
console.log(d);
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone);
//
var minTime = '06:00 PM';
var maxTime = '10:00 PM';
//convert into timestamp
//current time
var curr = new Date("November 21, 2017 " + d);
curr = curr.getTime();
//rounding time
var coeff = 1000 * 60 * 45;
var rounded = Math.ceil(curr / coeff) * coeff;
 rounded = new Date(rounded);
 rounded = (rounded.getHours() > 12 ? rounded.getHours() - 12 : rounded.getHours()) + ':' + rounded.getMinutes() + ' ' + (rounded.getHours() >= 12 ? "PM" : "AM");
alert (rounded);

//min time
var min = new Date("November 21, 2017 " + minTime);
min = min.getTime();
//max time
var max = new Date("November 21, 2017 " + maxTime);
max = max.getTime();
//time diff
var maxdiff = (max - curr)/(1000*60);
//alert (maxdiff);
//time stamp value
console.log("Current: "+ curr + " Min: " + min + " Max: " + max);
//if current time is less than min time
if(curr < min) {
 minTime = '02:00 PM'; 
}
//if current time is > than min time && current time less than max time && minutes difference between matime and current time is > 90 minutes.
else if(curr > min && curr < max && maxdiff >= 90 ) {
 minTime =rounded; 
}
else
{
$('#time').prop('disabled', true);
alert('Time Expired');
}
//time picker
$(document).ready(function() {
  $(function() {
    $('input#time').timepicker('remove').timepicker({
      'timeFormat': 'h:i A',
      'disableTextInput': true,
     'minTime': minTime,
      'maxTime': maxTime,
      'step': 15
    });
  });
});