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



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:

full-stack-img




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.



Improved By : ManasChhabra2