Search code examples
htmldateplaceholder

Show placeholder text for input type date

Placeholder does not work for input type date and datetime-local directly.

<input type="date" placeholder="Date" />
<input type="datetime-local" placeholder="Date" />

Instead the field shows mm/dd/yyy on desktop and nothing on mobile.

How can I show the Date placeholder text?

Solution

  • Use onfocus="(this.type='date')", example:

    <input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/>