<input type=text>
Convert date control to
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 toHTMLInputElement.setCustomValidity()
. (The specific behavior depends on the browser, but most will be displayed in a tooltip).
Demo
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>
, themin
andmax
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.