TimePicker问题
TimePicker问题
提问于 2020-12-16 20:43:29
我的代码中有一个小问题，所以我正在寻求帮助，如果有人能够帮助我，我会非常感激的。因此，这项工作的范围是制作一个登记表。除了约会的时间外，一切都很顺利。要求时间必须从上午9点到下午5点，间隔1小时。我使用了JQuery时间选择器，它显示了可能的小时的下拉列表，但是当用户键入输入(没有从列表中选择)时，需求就没有被遵循。
如果需要的话，这里有一个小摆弄：小提琴
<!DOCTYPE html>
<html>
<head>
<title>time</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
</head>
<body>
<form>
<label for="time">Enter time:</label>
<input type="text" id="time" name="time" class="timepicker" required> </div>
</form>
<script>
$(document).ready(function () {
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 60,
minTime: '09:00am',
maxTime: '05:00pm',
startTime: '09:00',
dynamic: false,
dropdown: true,
scrollbar: true
});
});
</script>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-16 21:35:40
这实际上有点复杂，但总之，您需要一个时间验证器来检查您的输入，下面是一个如何完成的示例：
<!DOCTYPE html>
<html>
<head>
<title>time</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
</head>
<body>
<form>
<label for="time">Enter time:</label>
<input type="text" id="time" name="time" class="timepicker" required> </div>
</form>
<script>
$(document).ready(function () {
var minTime = '09:00am';
var maxTime = '05:00pm';
function convertTo24Hour(time) {
var hours = parseInt(time.substr(0, 2));
if (time.indexOf('am') != -1 && hours == 12) {
time = time.replace('12', '0');
}
if (time.indexOf('pm') != -1 && hours < 12) {
time = time.replace(hours, (hours + 12));
}
return time.replace(/(am|pm)/, '');
}
function adjustForCompare(time) {
var splitted = time.split(':');
return parseInt(splitted[0]) * 60 + parseInt(splitted[1]);
}
function isTimeBetween(time, start, end) {
var startCompareTime = adjustForCompare(start)
var endCompareTime = adjustForCompare(end)
var inputTime = adjustForCompare(time)
if (startCompareTime <= inputTime && inputTime <= endCompareTime) {
return true;
}
return false;
}
$('#time').on('change', function (event) {
// Listen for change event
var isValid = isTimeBetween($(this).val(), convertTo24Hour(minTime), convertTo24Hour(maxTime));
// if time is not between minTime and maxTime set to empty otherwise do nothing
if (!isValid) {
$(this).val('');
// or do anything you want
}
})
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 60,
minTime: minTime,
maxTime: maxTime,
startTime: '09:00',
dynamic: false,
dropdown: true,
scrollbar: true,
});
});
</script>
</body>
</html>
我很快就会详细讨论关于这个答案的另一个编辑。
Stack Overflow用户
发布于 2020-12-16 21:12:31
要让timepicker忽略分钟，只需不要将mm放在timeFormat中。
小提琴：https://jsfiddle.net/Lcmv6rjx/
$(document).ready(function () {
$('#time').timepicker({
timeFormat: 'h p',
interval: 60,
minTime: '09:00am',
maxTime: '05:00pm',
startTime: '09:00',
dynamic: false,
dropdown: true,
scrollbar: true
});
});<!DOCTYPE html>
<html>
<head>
<title>time</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
</head>
<body>
<form>
<label for="time">Enter time:</label>
<input type="text" id="time" name="time" class="timepicker" required> </div>
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65330853
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号