input-date-to-text

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-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

<script type="importmap">
  {
    "imports": {
      "@w0s/input-date-to-text": "..."
    }
  }
</script>
<script type="module">
  import InputDateToText from '@w0s/input-date-to-text';

  for (const targetElement of document.querySelectorAll('.js-input-date-to-text')) {
    new InputDateToText(targetElement);
  }
</script>

<input type="date" class="js-input-date-to-text"
  data-title="Dates should be consecutive numbers or separated by `-` or `/` in the order of year, month, and day."
  data-validation-noexist="This date does not exist."
  min="2000-01-01"
  data-validation-min="Please enter a value after A.D.2000."
  max="2020-12-31"
  data-validation-max="Please enter a value before A.D.2020."
/>

Attributes

data-title [optional]

The program automatically sets the pattern attribute. HTML spec says, When an input element has a pattern attribute specified, authors should include a title attribute to give a description of the pattern. Therefore, as an equivalent to the title attribute, set a message to be displayed when the value does not match the pattern attribute value.

title [prohibition]

Use the data-title attribute instead. The reason for this is to ensure consistency in script disabled environments.

data-validation-noexist [required]

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

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.

data-validation-min [conditionally required]

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

data-validation-max [conditionally required]

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

step [prohibition]

Step attribute are not supported.