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?
<input type="date"> <input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time.
To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.
The ones that claim to be accessible aren't. For example, we know <input type="date"> is a problem for voice users across browsers. Graham Armfield already produced a thorough report on the accessibility of the native control and came to conclusion that nope, it is not accessible.
Just make the calendar-picker icon the full height and width of the input!
use onfocus="(this.type='date')"
, example:
<input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With