HTML <inpt type="date" ...> Needs value = 0000-00-00

Question

The website uses the dummy date, 0000-00-00 for certain things, such as a shipping date and when the item is not shipped.* It's also to determine if discount codes have an expiration date. If that date is 0000-00-00 then it does not expire.

I cannot see how the <inpt type="date" ...> be set to "0000-00-00" by either the program as it loads or by the user selecting a date.

The following shows mm/dd/yyyy, not the value, 0000-00-00.

<input type="date" id="thisid" name="thisame" value="0000-00-00">

Does anyone have a solution for

(1) Showing the 0000-00-00 and

(2) How to enter 0000-00-00?

*For shipping, there are other fields to tell if it shipped, but the office personnel tend to skip over things and the program is built to get around that. That is, if it is marked as shipped or has a tracking number in another field, and the ship date is empty, it will tell the customer that it shipped but not give the date.

Answer 1

0000-00-00 is not a valid date and cannot be used in a date field

You can try something like this

window.addEventListener('DOMContentLoaded', () => {
  const dateField = document.getElementById('thisid')
  const hiddenField = document.getElementById('theHidden');
  const resetDate = document.getElementById('resetDate');
  const testVal = () => {
    const val = dateField.value
    const empty = val === "";
    hiddenField.hidden = !empty;
    dateField.hidden = empty;
  }
  testVal(); // init
  resetDate.addEventListener('click', function(e) {
    dateField.value = "";
    testVal();
  });
  hiddenField.addEventListener('focus', function(e) {
    this.hidden = true;
    dateField.hidden = false;
  })
  dateField.addEventListener('change', testVal)
  document.getElementById('myForm').addEventListener('submit', function(e) {
    if (hiddenField.value === "") hiddenField.value = "0000-00-00"
  });
});

[type=date] { width:100px}
#theHidden { width:97px}

<form id="myForm">
  <input type="text" id="theHidden" name="thisname" value="0000-00-00" hidden/>
  <input type="date" id="thisid" value="0000-00-00" /> <input type="button" id="resetDate" value="Reset" />
  <input type="submit" />
</form>