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" />

fiddle updated online. https://jsfiddle.net/pamela_john/rh2t301w/33/ — Pamela, Nov 21 '17 at 14:46

cнŝdk · Answer 1 · 2017-11-21T14:55:49.550

0

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" />

edited Nov 21 '17 at 14:55

answered Nov 21 '17 at 08:57

cнŝdk

31,391
7
56
78

It is just displaying the min time and max time. Not working as expected. – Pamela Nov 21 '17 at 13:06
Some bug in my existing fiddle. It displays next time as 7.0 PM rather than 7.00 PM. Hence not working. It displays from 12.00 AM. https://jsfiddle.net/pamela_john/rh2t301w/20/ – Pamela Nov 21 '17 at 13:09
@Pamela I edited the answer, please take a look at it. – cнŝdk Nov 21 '17 at 13:18
The code snippet still displays 06:00 PM to 09:00 PM. No change. Oh..Okay you changed the min time. Sorry, Let me check. – Pamela Nov 21 '17 at 13:23
We have set min time as 1 PM and if current time is below 1 PM it need to display 1 PM. This always displays 06.00 PM. Wonder how?? And no checks for max time too. – Pamela Nov 21 '17 at 13:30
There is a bug. If let us say current time is above 07: 00 PM and maxtime is 07:00 PM. It will display from 07:15 PM till next day 07:00 PM. – Pamela Nov 21 '17 at 13:47
@Pamela It was missing a `()` in the first condition, check it now, it works perfectly. – cнŝdk Nov 21 '17 at 13:49
It is not working. Please change maxtime to a time below your current time. Please check my current fiddle too online. It has only one bug.Time rounding and minutes in 1 till 9. https://jsfiddle.net/pamela_john/rh2t301w/28/ – Pamela Nov 21 '17 at 14:01
@Pamela did you check the Snippet Demo?! – cнŝdk Nov 21 '17 at 14:25
There is a bug. You seem to be not testing it. Suppose maxtime is 04:00 PM and time now is 4:01 PM. It will display from 4:15 PM till next day 4:00 PM. Please change maxtime to less than your current time. I have a new fiddle with your code: https://jsfiddle.net/pamela_john/s5j2LLqn/1/ – Pamela Nov 21 '17 at 14:34
@Pamela I updated the code [and the **fiddle**](https://jsfiddle.net/chsdk/s5j2LLqn/3/), please take a look at it. – cнŝdk Nov 21 '17 at 14:56
Still it is buggy. Let us say that maxtime is 2:00 PM and current time is 1:30:12 PM. It will display from 12:00 AM.Please change maxtime and test. Moreover there needs to be atleast a gap of 30 to 45 minutes beterrn current time and mintime displayed. – Pamela Nov 21 '17 at 15:04
@Pamela, I can't reproduce that. I don't get the bug you are talking about. – cнŝdk Nov 21 '17 at 15:22
It is there. I checked it now. asked my friend to try it too. same issue. change maxtime and you will find out. – Pamela Nov 21 '17 at 15:40
@Pamela This is an [updated fiddle](https://jsfiddle.net/chsdk/s5j2LLqn/4/) with new maxTime, check it and check the updated code. – cнŝdk Nov 21 '17 at 16:04
the bug persists. You can try at different times. – Pamela Nov 22 '17 at 05:03

score 0 · Answer 2 · answered Nov 21 '17 at 09:07

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" />

I tried with the following time. It displays from 12.00 AM. It is not working as expected. var min = '06:00 PM', // test time max =' 09:00 PM', d = new Date(); — Pamela, Nov 21 '17 at 13:04
I get 02:45 PM to 04:00 PM if I now at 14:27 put 12:00 to 16:00 - that should give 02:30PM as min time I believe but pretty close — mplungjan, Nov 21 '17 at 13:28

jQuery Timepicker and time rounding issue

2 Answers2