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:

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.

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: