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