Время ввода HTML, где min — это pm (поздно), а max — am (рано)
У меня есть поле ввода с типом «время». Я хочу иметь позднее время (23:00) в качестве минимального значения и раннее время (6:00) в качестве максимального значения, создавая диапазон от 23:00 до 6:00. (т.е. 23:00, 12:00, 1:00, 2:00, 3:00, 4:00, 5:00, 6:00).
Я пробовал использовать Javascript, хотя хочу использовать его в крайнем случае. Я не хочу, чтобы собственный компонент отображался со значениями, которые я не хочу, чтобы пользователь выбирал (например, на мобильных устройствах).
Установка минимального значения на 00:00:00 и максимального значения на «06:00:00» работает так, как предполагалось. Когда минимальное значение до полуночи, это становится проблемой.
Я ожидаю, что минимальные и максимальные значения создадут диапазон, но это не работает должным образом.
Ответы 2
Я немного поэкспериментировал с псевдоклассом :invalid CSS, но ничего не смог придумать.
Обратите внимание, что в Fire Fox (в отличие от Хром) браузер не включает стрелки вверх и вниз для любого элемента формы <input type = "time">, поэтому атрибуты min и max не действуют.
Отмечу, что Сеть разработчиков Mozilla говорит следующее:
By default,
<input type = "time">does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value. This is helpful (assuming the time input is fully supported by the user agent), but you can't entirely rely on the value to be a proper time string, since it might be an empty string (""), which is allowed. It's also possible for the value to look roughly like a valid time but not be correct, such as 25:05.
Источник:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Validation
Как указано в документах MDN:
Unlike many data types, time values have a periodic domain, meaning that the values reach the highest possible value, then wrap back around to the beginning again. For example, specifying a min of 14:00 and a max of 2:00 means that the permitted time values start at 2:00 PM, run through midnight to the next day, ending at 2:00 AM.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max
Тем не менее, похоже, что это не работает должным образом в Chrome 76.0,
после простого теста со значением min больше, чем max, все время не проходит проверку, и форма просто не работает.
Я предлагаю https://timepicker.co/, так как он будет работать в разных браузерах.
input:invalid+.validity:after {
content: '✖';
}
input:valid+.validity:after {
content: '✓';
}<form>
<label for = "time1">3:00 to 6:00: </label>
<input type = "time" min = "3:00" max = "6:00" name = "time1" required>
<span class = "validity"></span>
<hr>
<label for = "time2">23:00 to 6:00: </label>
<input type = "time" min = "23:00" max = "6:00" name = "time2" required>
<span class = "validity"></span>
</form>Вы также можете использовать комбинацию типа time и type date.
Я отметил это как «правильный ответ». Проще говоря, похоже, что периодический домен не позволяет вам иметь минимальное время больше, чем максимальное время. Мое решение состояло в том, чтобы использовать moment.js и динамически создавать поле выбора/параметра с использованием цикла while. К сожалению, у timepicker.co та же проблема: вы не можете указать диапазон, в котором минимум больше максимума.