jQuery Timepicker and time rounding issue

Question

I am using the following jQuery Timepicker library:

http://jonthornton.github.io/jquery-timepicker/

https://github.com/jonthornton/jquery-timepicker

I want the user to select an event at 06:00 PM up till 09.00 PM. When an user selects time picker it will start from min time to max time. Suppose a user logins at 07:12 PM, user needs to be shown date from 08:00 PM or 08:15 PM till 1 hour before the max time of 09:00 PM. If time exceeds max time, to display a sweetalert that time has exceeded maximum time. If time is earlier than min time all the time starting from 06:00 PM to 09:00 PM are displayed.

I am getting current local time in var d.

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

How is it possible to change min time taking into consideration local time and not to exceed max time??

As a newbie it seems to be over my head at the moment. Request from experts for help.

My Fiddle:

updated: https://jsfiddle.net/pamela_john/rh2t301w/33/

Now i have a bug which if current time is 7.01 PM and if maxtime is 07:00 PM. It will display incorrectly from 12:00 AM. Similarly for any time.

 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); $(document).ready(function() { $(function() { $('input#time').timepicker('remove').timepicker({ 'timeFormat': 'h:i A', 'disableTextInput': true, 'minTime': '06:00 PM', 'maxTime': '09:00 PM', 'step': 15 }); }); }); 

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

Answer 1

You need to check upon the current date hours and change your minDate accordingly.

This is how should be your code:

$(document).ready(function() {
  $(function() {
    var currentDate = new Date();
    var currentHour = currentDate.getHours();
    var currentMins = currentDate.getMinutes();
    var minTime = '01:00 PM';
    var maxTime = '03:00 PM';
    if (+maxTime.split(":")[0] + 12 <= currentHour) {
      alert("Sorry the time has passed !!!");
    } else {
      if (+minTime.split(":")[0] + 12 < currentHour) {
        minTime = currentHour > 12 ? currentHour - 12 : currentHour;
        if (currentMins > 44) {
          minTime++;
          minTime += ":00 PM";
        } else if (currentMins < 44 && currentMins > 30) {
          minTime += ":45 PM";
        } else if (currentMins < 30 && currentMins > 15) {
          minTime += ":30 PM";
        } else if (currentMins < 15)
          minTime += ":15 PM";
      }
    }

    $('input#time').timepicker('remove').timepicker({
      'timeFormat': 'h:i A',
      'disableTextInput': true,
      'minTime': minTime,
      'maxTime': maxTime,
      'step': 15
    });
  });
});

Demo:

 $(document).ready(function() { $(function() { var currentDate = new Date(); var currentHour = currentDate.getHours(); var currentMins = currentDate.getMinutes(); var minTime = '01:00 PM'; var maxTime = '03:00 PM'; if (+maxTime.split(":")[0] + 12 <= currentHour) { alert("Sorry the time has passed !!!"); } else { if (+minTime.split(":")[0] + 12 < currentHour) { minTime = currentHour > 12 ? currentHour - 12 : currentHour; if (currentMins > 44) { minTime++; minTime += ":00 PM"; } else if (currentMins < 44 && currentMins > 30) { minTime += ":45 PM"; } else if (currentMins < 30 && currentMins > 15) { minTime += ":30 PM"; } else if (currentMins < 15) minTime += ":15 PM"; } } $('input#time').timepicker('remove').timepicker({ 'timeFormat': 'h:i A', 'disableTextInput': true, 'minTime': minTime, 'maxTime': maxTime, 'step': 15 }); }); }); 

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

Answer 2

If I read your question correctly, you might want something like this I have tried to to round the quarter correctly but you will need to test

 function pad(num) { return String("0" + num).slice(-2) } function roundQuarter(d) { var date = new Date(d.getTime()); // https://stackoverflow.com/a/4968292/295783 date.setMinutes(((date.getMinutes() + 7.5) / 15 | 0) * 15) % 60; date.setHours((((date.getMinutes() / 105) + .5) | 0) + date.getHours()) % 24; return date; } var min = 9, // test time max = 11, d = new Date(); var minDate = new Date(d.getFullYear(), d.getMonth(), d.getDate(), min, 0, 0); var maxDate = new Date(d.getFullYear(), d.getMonth(), d.getDate(), max, 0, 0); if (d > minDate.getTime()) minDate = roundQuarter(d); var minString = pad(minDate.getHours() > 12 ? minDate.getHours() - 12 : minDate.getHours()) + ':' + pad(minDate.getMinutes()) + ' ' + (minDate.getHours() >= 12 ? "PM" : "AM"); var maxString = pad(maxDate.getHours() > 12 ? maxDate.getHours() - 12 : maxDate.getHours()) + ':' + pad(maxDate.getMinutes()) + ' ' + (maxDate.getHours() >= 12 ? "PM" : "AM"); console.log(d, minString, maxString); $(document).ready(function() { $(function() { if (d > maxDate) { $('input#time').val("too late").prop("disabled", true); } else { $('input#time').timepicker('remove').timepicker({ 'timeFormat': 'h:i A', 'disableTextInput': true, 'minTime': minString, 'maxTime': maxString, 'step': 15 }); } }); $(document).on('click', '.ui-state-disabled', function() { alert('Invalid date') }) }); 

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