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 小时显示日期。如果时间超过最大时间，则显示时间已超过最大时间的甜蜜警报。如果时间早于最小时间，则显示从 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);

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

作为一个新手，目前这似乎超出了我的想象。向专家寻求帮助。

我的小提琴：

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

现在我有一个 错误，如果当前时间是 7.01 PM，而 maxtime 是 07:00 PM。它将从上午 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" />

Answer 2

您需要检查当前日期时间并相应地更改您的minDate。

这应该是你的代码：

$(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
    });
  });
});

演示：

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