jQuery时间选择器和时间舍入问题

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

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

作为一个新手，我现在似乎有点不知所措。向专家寻求帮助。

我的Fiddle:

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

现在我有一个错误，如果当前时间是下午7点01分，如果最大时间是晚上7点。它将从上午12点开始错误显示。任何时间都是如此。

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