Chandan Rajpurohit

An Artist With Technical Skills

Advertisements

In HTML by default the placeholder is default date format. Below we will be seeing how to change this default date format placeholder.

<html>
<body>
<input type='date'></input>
</body>
</html>

Above code generate following which all must be getting same.

Fig 1. Input Type Date
<html>
<body>
<input type='text' placeholder='Date'></input>
</body>
</html>

Above code will generate following output but we don’t need this.

Fig 2. Input Type Text
Advertisements

What next we need to do is we need to add onfocus in input type as shown below:

<html>
<body>
<input type='text' placeholder='Date' onfocus="(this.type='date')"></input>
</body>
</html>

Above code will normally show the input as ‘text’ but as we click on it type will change from ‘text’ to ‘date’.

Fig 3. Input Type ‘Text’ with onfocus Input Type ‘Date’

Simple and working trick I hope it will be useful. If any doubt you can mention it in comment section.

Thank You.

Advertisements

Leave a Reply

%d bloggers like this: