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: