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