javascript - jQuery Timepicker 和时间舍入问题

Question

我正在使用以下 jQuery Timepicker 库:

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

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

我希望用户在 06:00 PM 到 09:00 PM 之间选择一个事件。当用户选择时间选择器时，它将从最短时间开始到最长时间。假设用户在 07:12 PM 登录，则需要向用户显示从 08:00 PM 或 08:15 PM 到最大时间 09:00 PM 之前 1 小时的日期。如果时间超过最大时间，则显示一个甜蜜警报，表明时间已超过最大时间。如果时间早于 min 时间，则显示从 06:00 PM 到 09:00 PM 的所有时间。

我正在获取 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);

如何在考虑本地时间的情况下更改最短时间而不超过最长时间？

作为一个新手，目前这似乎超出了我的理解范围。请求专家帮助。

我的 fiddle :

更新: https://jsfiddle.net/pamela_john/rh2t301w/33/

现在我有一个错误，如果当前时间是晚上 7.01 点且最大时间是晚上 07:00。从中午 12:00 开始，它将显示不正确。任何时间都是如此。

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

如果我正确地阅读了你的问题，你可能想要这样的东西我已尝试正确舍入季度，但您需要测试

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