@saekitominaga/customelements-input-date-totext NP

Convert date control to `<input type=text>`

Converts <input type=date> in the HTML source code to <input type=text>. In some cases, it is troublesome to select a date decades ago in the calendar picker of the browser, so use it when you dare to set <input type=text> such as date of birth.

In addition to the YYYY-MM-DD format, you can enter in the YYYY/MM/DD and YYYYMMDD formats.
You can omit leading 0 of the month and day, such as 2000-1-3 or 2000/1/3.
You can also enter in full-width numbers.
If a non-existent date such as February 30 is entered, the error message specified by the data-validation-message-date-noexist attribute is set to HTMLInputElement.setCustomValidity(). (The specific behavior depends on the browser, but most will be displayed in a tooltip).

Demo

Demo page

Examples

<input type="date" is="x-date-to-text"
  min="2000-01-01"
  max="2020-12-31"
  data-validation-message-date-noexist="This date does not exist."
  data-validation-message-date-min="Please enter a value after A.D.2000."
  data-validation-message-date-max="Please enter a value before A.D.2020."
/>