时间选择器问题

Question

我的代码有点问题，所以我一直在寻求帮助，如果有人能提供帮助，我将不胜感激。所以工作范围就是做一个登记表。除了约会时间外，一切正常。要求是时间必须是从上午 9 点到下午 5 点，间隔 1 小时。我使用 JQuery timepicker 向我们显示了可能小时数的下拉列表，但是当用户键入输入（不从列表中选择）时，没有遵循要求。

如果需要，这里有一个 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>

Answer 1

要使 timepicker 忽略分钟，只需不要将 mm 放入 timeFormat。

Fiddle: 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>

Answer 2

这实际上有点复杂，但总而言之，您需要一个时间验证器来检查您的输入，下面是一个如何完成的示例：

<!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>

我将很快对这个答案进行另一次编辑，详细介绍。

时间选择器问题

TimePicker Issue

html

javascript

jquery

timepicker