HTML5 Date field test

Question

Even if the format is dd/mm/yyyy I see that I can insert more than only 4 characters in the year. I don't know how to stop this behavior.

<html>
<head>
<title>input test data insert</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <input type="date" data-date-format="dd/mm/yyyy">
</body>
</html>

Is this the answer to your question? https://stackoverflow.com/questions/24603919/html5-date-input-6-digit-year — Erfan Bahramali, May 05 '21 at 11:46
If you prevent the application from accepting a year of more than 4 digits, it will suffer from [the Y10K problem](https://en.wikipedia.org/wiki/Year_2000_problem). — Armen Michaeli, May 05 '21 at 12:03

score 0 · Answer 1 · answered May 05 '21 at 11:47

Add a max attrubute and set it to max="9999-12-31"

<html>
<head>
<title>input test data insert</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <input type="date" data-date-format="dd/mm/yyyy" max="9999-12-31">
</body>
</html>

score 0 · Answer 2 · answered May 05 '21 at 11:49

You can specify a max date allowed in the input (keep in mind that 10000AD is a real year, even if it is a long way off), but it will only be checked when the form is submitted.

<form>
  <input type="date" data-date-format="dd/mm/yyyy" max="9999-12-31">
  <button>Submit</button>
</form>

You can add JS to check the value when it changes, but you'll need to provide your own UI for showing the error.

document.querySelector('input').addEventListener('change', event => {
  if (!event.target.checkValidity()) alert("Error")
});

<form>
  <input type="date" data-date-format="dd/mm/yyyy" max="9999-12-31">
  <button>Submit</button>
</form>

HTML5 Date field test

2 Answers2