Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

placeholder for input type date html5

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?

like image 628
Elyor Avatar asked Jun 21 '15 05:06

Elyor


People also ask

How do you input a date in HTML?

<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.

How can set input type date in mm/dd/yyyy format using HTML?

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.

Is input type date accessible?

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.

How do I show calendar pop when input type date is on focus?

Just make the calendar-picker icon the full height and width of the input!


1 Answers

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

<input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/>
like image 166
Elyor Avatar answered Nov 13 '22 03:11

Elyor