Convert date control to by Custom Elements.

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."
/>

Attributes

min, max [optional]

Of the attributes that can be specified with <input type=date>, the min and max attributes can be specified. Please refer to the HTML specification for the usage of attributes.

step

Currently, it does not support step attribute.

data-validation-message-date-noexist [required]

Error message when a non-existent date such as February 30 is entered.

data-validation-message-date-min [conditionally required]

Error message when a date past the min attribute value is entered.

data-validation-message-date-max [conditionally required]

Error message when a date future the max attribute value is entered.