How do I show a place holder in the date field and make it work in iOS Safari,

Question

In most browsers I can do the following

const x = document.getElementById("asdf");
x.addEventListener("focus", () => {
  x.type = 'date'
})
x.addEventListener("blur", () => {
  x.type = 'text'
})

<input type="text" id="asdf" placeholder="foop" />

However on mobile Safari it does not show the proper date picker when I tap on the field.

Is there anything I can do?

It also doesn't work in Chrome on iOS, it reports "Script error" as soon as I run the code. I suspect this is related. But I can't bring up a real console to see the actual error. — Barmar, May 12 '23 at 00:11

score 0 · Answer 1 · answered May 12 '23 at 00:32

The work around I eventually put in was to create two input fields

const x = document.getElementById("asdf");
const y = document.getElementById("asdf-date");
x.addEventListener("focus", () => {
  x.style.display = "none";
  y.style.display = "initial";
  y.focus();
})
x.addEventListener("blur", () => {
  x.style.display = "initial";
  y.style.display = "none";
  x.value = y.value;
})

<input type="text" id="asdf" placeholder="foop" />
<input type="text" id="asdf-date" style="display:none" placeholder="foop" />

How do I show a place holder in the date field and make it work in iOS Safari,

1 Answers1