时间选择器问题
[英]TimePicker Issue
问题描述
i have a little problem in my code, so i was looking for help and it will be really appreciated if someone is able to help.
我的代码中有一个小问题，所以我正在寻求帮助，如果有人能够提供帮助，我将不胜感激。 So the scope of the work is to make a registration form.所以工作的scope就是做个注册表。 Everything works fine besides the hour of the appointment.除了约会的时间外，一切都很好。 The requirements is that hours must be from 9am to 5pm with 1 hour interval.要求是时间必须从上午 9 点到下午 5 点，间隔 1 小时。 I used JQuery timepicker that shows us the dropdown list of possible hours, but when the user types the input (doesn't choose from the list) the requirements are not followed.我使用了 JQuery 时间选择器，它向我们显示了可能的小时数的下拉列表，但是当用户键入输入（不从列表中选择）时，不符合要求。
Here is a jsfiddle if needed: jsfiddle如果需要，这是一个 jsfiddle： jsfiddle
<!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 个解决方案
解决方案1
0 2020-12-16 21:12:31
To make timepicker ignore minutes, just don't put mm in timeFormat .要使timepicker忽略分钟，请不要将mm放入timeFormat 。
Fiddle: https://jsfiddle.net/Lcmv6rjx/小提琴： 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>
解决方案2
0 已采纳 2020-12-16 21:35:40
This is actually a bit complicated but in summary, you need a time validator that checks your input, here's an example of how it can be done:这实际上有点复杂，但总而言之，您需要一个时间验证器来检查您的输入，这是一个如何完成的示例：
<: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>
I will go into detail with another edit on this answer soon.我将很快详细介绍 go 并对此答案进行另一次编辑。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.