input-date-to-text Demo

Minimal attributes (data-validation-noexist attribute)

<form>
  <p>
    <input
      type="date"
      class="js-input-date-to-text"
      data-validation-noexist="This date does not exist." />
    <button>Submit</button>
  </p>
</form>

* Try entering a date that does not exist, such as 2001-02-29.

Accessibility (data-title attribute)

<form>
  <p>
    <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." />
    <button>Submit</button>
  </p>
</form>

* Try entering a non-date format, such as 2000+01+01.

min, data-validation-min attribute

<form>
  <p>
    <input
      type="date"
      class="js-input-date-to-text"
      min="2000-01-01"
      data-validation-noexist="This date does not exist."
      data-validation-min="Please enter a value after A.D.2000."
    />
    <button>Submit</button>
  </p>
</form>

* Try entering a date older than the min attribute value, such as 1999-12-31.

max, data-validation-max attribute

<form>
  <p>
    <input
      class="js-input-date-to-text"
      type="date"
      max="2020-12-31"
      data-validation-noexist="This date does not exist."
      data-validation-max="Please enter a value before A.D.2020."
    />
    <button>Submit</button>
  </p>
</form>

* Try entering a date newer than the max attribute value, such as 2021-01-01.