Change default input date placeholder

Question

So I have this input button with the default state that has no date chosen (no value), but I don't like the way it stays, so instead, I would like the date format with a text for example Select Date.

screenshot for the input

Answer 1

I created 2 events and added some css styling to achieve the desired result.

The events are:

focusIn

• sets type to date

focusOut

• Changes type to text
• if the user didn't select date then show 'Select date'

function init() {
    const el = document.querySelector('#date');
    el.addEventListener('focusin', (event) => {
        event.target.type = 'date';
    });
    
     el.addEventListener('focusout', (event) => {
        event.target.type = 'text';
        if(!event.target.value) {
          event.target.placeholder = 'Select date';
        }
    });
}

addEventListener('load', init);

#date {
  width: 200px;
  height: 15px;
  padding: 15px 10px;
  border-radius:5px;
  font-size: 14px;
  border-width: 1px;
  outline: none;
}

#date:focus {
  outline: none;
}

<input placeholder='Select date' class="textbox-n" type="text" id="date">

Answer 2

This will work

<input placeholder="Select Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">