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. Everything works fine besides the hour of the appointment. The requirements is that hours must be from 9am to 5pm with 1 hour interval. 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.

Here is a jsfiddle if needed : 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>

Solution

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.