Remove Default Text/Placeholder Present in HTML5 Input Element of Type=Date

Remove default text/placeholder present in html5 input element of type=date

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}

Html5 remove default place holder from date input

you can do like this

html

<input type="date" placeholder="Date" required>

css

input[type="date"]::before {
    color: #999999;
    content: attr(placeholder);
}
input[type="date"] {
    color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
    color: #666666;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
    content: "" !important;
}

check codepen url - https://codepen.io/piyushjn/pen/eqyXaM

Instead of content: attr(placeholder); you can give font icon.

Remove placeholder from date type input in chrome

You can hide the format placeholder with the following style rule:

<style>
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}
</style>
<input type=date>

Not showing placeholder for input type= date field

It may not be appropriate... but it helped me.

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

Change or hide the placeholder in HTML5 datepicker

You can use CSS to change the default placeholder. Check this answer https://stackoverflow.com/a/22020200/909535

Is it possible to style the default placeholder text on an HTML5 input type= date element? in Chrome?

There is no placeholder in a date input in Chrome. If you check "Show shadow DOM" in devtools' settings, you will be able to inspect it:

<input type="date">
  #document-fragment
    <div dir="ltr" pseudo="-webkit-date-and-time-container">
      <div pseudo="-webkit-datetime-edit">
      <span aria-help="Day" aria-valuemax="31" aria-valuemin="1" pseudo="-webkit-datetime-edit-day-field" role="spinbutton">dd</span>
      <div pseudo="-webkit-datetime-edit-text">/</div>
      <span aria-help="Month" aria-valuemax="12" aria-valuemin="1" pseudo="-webkit-datetime-edit-month-field" role="spinbutton">mm</span>
      <div pseudo="-webkit-datetime-edit-text">/</div>
      <span aria-help="Year" aria-valuemax="275760" aria-valuemin="1" pseudo="-webkit-datetime-edit-year-field" role="spinbutton">yyyy</span></div>
      <div></div>
      <div pseudo="-webkit-calendar-picker-indicator"></div>
    </div>
</input>

You can style separate elements using their pseudos (works in Chrome Canary):

::-webkit-datetime-edit-year-field {
  font-weight: bold;
}

Remove Default Text/Placeholder Present in HTML5 Input Element of Type=Date