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.
Below example illustrates the above approch:
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.
- 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 | <input type="date">
- HTML | DOM Input Date type Property
- HTML | DOM Input URL placeholder Property
- HTML | <input> placeholder Attribute
- HTML | DOM Input Password placeholder Property
- HTML | DOM Input Text placeholder Property
- HTML | DOM Input Email Placeholder Property
- HTML | DOM Input Search placeholder Property
- HTML | DOM Input Number placeholder Property
- HTML | DOM Input Date min Property
- HTML | DOM Input Date max Property
- HTML | DOM Input Date value Property
- HTML | DOM Input Date Object
- HTML | DOM Input Date name Property
- HTML | DOM Input Date autocomplete Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.