Change default input date placeholder-CodePudding

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

CodePudding user response：

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'  type="text" id="date">

CodePudding user response：

This will work

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