HTML поля ввода времени минимальные и максимальные атрибуты не работают в течение нескольких минут

Question

HTML поля ввода времени минимальные и максимальные атрибуты не работают в течение нескольких минут

0

Таким образом, я использую угловые для создания простого мобильного приложения и внутри раздела html, у меня есть это:

<input id="timeSelected" type="time" min="{{minTimeToPresent}}" max="{{maxTimeToPresent}}" ng-model="date.time" class="time-input" ng-change="checkTheSelectedTime()"/>

Это мой очень простой "сборщик времени", и он работает очень красиво, я динамически давал элемент min и max, как вы можете видеть, а min и max работают в течение "часов" части времени и даже удаляют часы, которые лежат вне диапазона от колесика прокрутки внутри приложения (при тестировании на телефоне, конечно), но по какой-то причине он не делает то же самое для минут.

Интересно, что моя функция изменения ng не срабатывает, если вы выбираете время, выходящее за пределы диапазона в отношении минут, поэтому, если у меня есть максимум 20:30:00, например, и выберите время "20:31", ng-change не запускается вообще, но если я выбираю "20:30", он запускается.

Таким образом, он действует так, как будто он знает минимальные и максимальные значения, но в первую очередь я хочу, чтобы неправильные МИНУТЫ были удалены с выбранного колеса прокрутки тоже, как часы.

Пожалуйста, помогите, спасибо!

Дополнительные детали...

Динамически установленные времена находятся в таком формате: например, "21:30:00"
Я устанавливаю минимальные и максимальные значения перед загрузкой DOM, чтобы я мог быть уверен, что будут использоваться правильные значения.

AppSmartBK 01 апр. 2016, в 18:45

Источник

0

Используя валидаторы HTML5 для min и max, это будет невозможно. Они действительны только при отправке формы. Он не может ограничивать минуты, иначе он не позволит пользователям выбрать правильное время, если оно меньше вашего максимума.
Alex Chance 01 апр. 2016, в 16:52

Теги:

html

angularjs

input

time

1 ответ

Ещё вопросы

Используя валидаторы HTML5 для min и max, это будет невозможно. Они действительны только при отправке формы. Он не может ограничивать минуты, иначе он не позволит пользователям выбрать правильное время, если оно меньше вашего максимума.

Alex Chance · Answer 1 · 2016-04-01T16-01-00.000Z

Единственный метод, который я нашел, который выполнит это, не написав что-то самостоятельно, - это использование загрузочного буфера UI Timepicker

Вы можете указать min и max, и это ограничит пользователя от его изменения на входе. Он проверяет ввод в режиме реального времени. Похоже, это ваши требования.

Вот демонстрация plunkr со своего сайта, которую я модифицировал, показывая минимальную и максимальную проверку. Вы должны указать min и max в коде контроллера в формате даты.

HTML

 <uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" max="max" min="min" ></uib-timepicker>

JS

var d = new Date();
d.setHours( 2 );
d.setMinutes( 30 );
$scope.min = d;

var d2 = new Date();
d2.setHours( 11 );
d2.setMinutes( 0 );
$scope.max = d2;