How to set placeholder value for input type date in HTML 5 ?
To set a placeholder value for the input
type date in HTML5, use the placeholder
attribute. The placeholder
attribute doesn’t work well with input
type “date.” Use onfocus="(this.type='date')"
for a custom placeholder, enabling a date selection dropdown.
Syntax:
onfocus="(this.type='date')"
Example 1:Â In this example, we are shown how to set placeholder value for input type date.
html
<!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 >
Starting Date:
< input type = "text" placeholder = "MM/DD/YYYY"
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 a normal text input field.Â
Example 2: When you lose focus on the date the date field changes back to a text field.Â
html
<!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 >
Starting Date:
< input type = "text" placeholder = "MM/DD/YYYY"
onfocus = "(this.type='date')"
onblur = "(this.type='text')" >
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.
Last Updated :
04 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...