Skip to content
Related Articles

Related Articles

How to set placeholder value for input type date in HTML 5 ?
  • Last Updated : 18 Dec, 2019

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :