Блог

Главная - Вопросы по программированию - Проблема с выбором времени

Проблема с выбором времени

#javascript #html #jquery #timepicker

#javascript #HTML #jquery #выбор времени

Вопрос:

у меня небольшая проблема в моем коде, поэтому я искал помощи, и буду очень признателен, если кто-нибудь сможет помочь. Итак, объем работы заключается в создании регистрационной формы. Все работает нормально, кроме часа встречи. Требования заключаются в том, что часы должны быть с 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>

Комментарии:

1. Чего вы хотите достичь?

2. поле в форме для ввода времени, которое будет содержать как прокручиваемый список возможных часов приема, так и полностью рабочий пользовательский ввод, который будет соответствовать требованиям. Поэтому, если пользователь вводит, например, 13:45, он не должен это принимать, но это так.

Ответ №1:

На самом деле это немного сложно, но в целом вам нужен валидатор времени, который проверяет ваш ввод, вот пример того, как это можно сделать:

 <!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 amp;amp; hours == 12) {
                    time = time.replace('12', '0');
                }
                if (time.indexOf('pm') != -1 amp;amp; 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 amp;amp; 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>

Я скоро подробно расскажу о другом редактировании этого ответа.

Ответ №2:

Чтобы заставить 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>

Комментарии:

1. Хорошо, это фиксированные минуты, но в области ввода я могу написать все, что захочу, я могу даже написать просто число «10», и оно примет его, я хочу, чтобы ввод соответствовал требованиям, чтобы я мог писать только с 9 утра до 5 вечера, в противном случае, возможно, ошибка.

2. @UglyMicha когда я запускаю свой фрагмент, ввод чего-либо еще, кроме «полного» часа, не принимается после щелчка за пределами input элемента или после нажатия enter