Время ввода HTML, где min - это pm (поздний), а max - am (ранний) - PullRequest
Новая
       22

Время ввода HTML, где min - это pm (поздний), а max - am (ранний)

2 голосов
/ 29 мая 2019

У меня есть поле ввода с типом «время».Я хочу, чтобы в качестве минимального значения использовалось позднее время (23:00 вечера), а в качестве максимального значения - раннее время (6:00 утра), создавая диапазон с 23:00 до 6:00.(т. е. 11:00, 12:00, 1:00, 2:00, 3:00, 4:00, 5:00, 6:00).

Я пытался использовать Javascript, хотя я хочу использовать его в качестве последнего средства.Я не хочу, чтобы собственный компонент отображался со значениями, которые пользователь не должен выбирать (например, на мобильных устройствах).

Установка значения min в 00:00:00и значение 'max' до «06:00:00» работает как задумано.Когда минимальное значение наступает до полуночи, оно становится проблемой.

Я ожидаю, что минимальное и максимальное значения создадут диапазон, но это не сработает, как ожидалось.

Ответы [ 2 ]

1 голос
/ 29 мая 2019

Как указано в документах MDN:

В отличие от многих типов данных, значения времени имеют периодическую область, что означает что значения достигают максимально возможного значения, а затем возвращаются снова к началу. Например, указав мин 14:00 а максимум 2:00 означает, что допустимые значения времени начинаются в 2:00 PM, пробег с полуночи до следующего дня, заканчивающийся в 2:00.

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>
0 голосов
/ 29 мая 2019

Я немного поэкспериментировал с псевдоклассом :invalid CSS, но ничего не смог придумать.

Обратите внимание, что в Firefox (в отличие от Chrome ) браузер не содержит стрелок вверх и вниз на любом элементе формы <input type="time">, поэтому min и max атрибуты не имеют никакого эффекта.

Замечу, что Сеть разработчиков Mozilla говорит следующее:

По умолчанию <input type="time"> не применяет проверку к введенные значения, кроме интерфейса пользовательского агента, обычно не позволяя вам вводить что-либо кроме значения времени. Это полезно (при условии, что ввод времени полностью поддерживается пользователем агент), но вы не можете полностью полагаться на значение, чтобы быть подходящим временем строка, так как это может быть пустая строка (""), что разрешено. Это также возможно, что значение выглядит примерно как действительное время, но не будь прав, например 25: 05.

Источник: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Validation

...