Есть ли ошибка с атрибутами "min" и "max" в "type: date"?

Question

CSS:

.in-range-test input:in-range {
  background-color: lime;
}

.in-range-test input:out-of-range {
  background-color: red;
}

.in-range-test input:in-range+label:after {
  content: 'Okay';
  color: lime;
}

.in-range-test input:out-of-range+label:after {
  content: 'Not okay';
  color: red;
}

<div class="in-range-test">
  <form>
    <input type="date" min="2000-05-30" max="2001-06-30">
    <label>Your number is: </label>
  </form>

</div>

Ограничения «min» и «max» работают нормально, если вы нажимаете на календарь «date», однако, если вы используете клавиатуру для установки даты за пределами допустимого диапазона, он начинает работать очень ненормальным образом, игнорируя ограничения, установленные атрибутами «min» и «max».

Например, если вы вручную установите год на 5555, день на 31 , то каждый второй или третий месяц считается «действительным». Если вы установите день 30 или ниже, тогда будет действителен только февраль. Установка даты на дату ниже, чем ограниченная дата «min», также приводит к ненормальному поведению.

Это какая-то ошибка?

Answer 1

Частично проблема заключается в том, что при использовании календаря «дата» браузер нормализует ввод в формате «гггг - мм-дд», который можно сравнить с мин. / Макс. При использовании ввода текста поле даты технически может быть во многих других форматах, что приводит к тому, что вы испытываете. Способ обойти это - использовать шаблон регулярного выражения для принудительного ввода формата ввода, такого как:

<input type="date" min="2000-05-30" max="2001-06-30" pattern="\d{4}-\d{2}-\d{2}">

Конечно, есть также тот факт, что не все браузеры реализуют вещи одинаково / правильно, но это проблема каждого браузера.