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

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 approch:



Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.