How to set placeholder value for input type date in HTML 5 ? - GeeksforGeeks

29 Jul, 2021
The placeholder attribute does not work with the input type Date, so place any value as a placeholder in the input type Date. You can use the onfocus=”(this.type=’date’) inside the input filed. Because you are required to have a custom placeholder value for input type “date”, and you have a drop-down calendar where the user can select the date from.
Syntax:
onfocus="(this.type='date')"
Below example illustrates the above approach:
Example 1:
<!DOCTYPE html><html>  <head>    <title>        Placeholder value for        input type="Date"    </title></head>      <body style="text-align:center;">          <h1 style="color:green;">GeeksforGeeks</h1>          <h4>Placeholder value for input type="Date"</h4>          <!-- using onfocus="(this.type='date')" -->    Starting Date:    <input type="text" placeholder="MM/DD/YYYY"                    onfocus="(this.type='date')">          <!-- Not using onfocus="(this.type='date')" -->    Ending Date:    <input type="text" placeholder="MM/DD/YYYY"></body>  </html>                   
Output:
Note: After clicking on the left field, we get the dd/mm/yyyy box, and we get the calendar drop-down menu after clicking on it again. This is because the input box is actually a “text” input, but on clicking on it (i.e. focusing on it), we get the data type input. But the right field is normal text input filed.
Example 2: When you lose the focus on the date the date field changes back to a text field.
<!DOCTYPE html><html>  <head>    <title>        Placeholder value for input type="Date"    </title></head>  <body style="text-align:center;">          <h1 style="color:green;">GeeksforGeeks</h1>          <h4>Placeholder value for input type="Date"</h4>          <!-- using onfocus="(this.type='date')" -->    Starting Date:    <input type="text" placeholder="MM/DD/YYYY"        onfocus="(this.type='date')"        onblur="(this.type='text')">          <!-- Not using onfocus="(this.type='date')" -->    Ending Date:    <input type="text" placeholder="MM/DD/YYYY"></body>  </html>  
Output:
As we can see, we can modify the placeholder text as needed. On one click, we get the standard date input field, and we can enter the date:
After entering the date, it looks as follows:
Upon losing focus, it changes back to a text field due to the onblur event we have introduced:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ManasChhabra2
JavaScript-Misc
Picked
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
How to Insert Form Data into Database using PHP ?
HTTP headers | Content-Type
Design a web page using HTML and CSS
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript