We have on text filed input type date .So we need placedholder so we tried like this

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

Now it's showing placehoder "Date".Then i press it's showing mm/dd/yyyy.Then click it's showing Date box.But no need show mm/dd/yyyy .After click on textField directly open date box .Please guide to us.

We have on text filed input type date .So we need placedholder so we tried like this

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

Now it's showing placehoder "Date".Then i press it's showing mm/dd/yyyy.Then click it's showing Date box.But no need show mm/dd/yyyy .After click on textField directly open date box .Please guide to us.

• javascript
• html
• css
• input
• datepicker

• Does this answer your question? Remove default text/placeholder present in html5 input element of type=date – James Commented Jul 7, 2020 at 22:19

3 Answers 3

As described in the previous discussions, you can not set the value to blank for JavaScript Date object. For more information refer to :How to initialize java.util.date to empty

However,you can set the default values to a valid date. Refer to How to set date value for more information.

Copying my answer from another post in case someone finds this and not that: CSS: Hide date mm/dd/yyyy placeholder on print

It's a pure workaround, but I had the same issue and this was the simplest route:

function RemoveClass(el, target_class) {
  el.classList.remove(target_class);
}

.test {
    color: rgba(0,0,0,0);
  }

<input type="date" class="test" onclick="RemoveClass(this,'test');">

Apply below css to your input box.

::-webkit-input-placeholder { /* Chrome/Opera/Safari */

  color: white;

}

::-moz-placeholder { /* Firefox 19+ */

  color: white;

}

:-ms-input-placeholder { /* IE 10+ */

  color: white;

}

:-moz-placeholder { /* Firefox 18- */

  color: white;

}

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