How to Style The Default Placeholder Text on an HTML5 Input Type="Date" Element? in Chrome

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;
}

Show placeholder text for input type date

use onfocus="(this.type='date')", example:

<input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/>

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;
}

Not showing placeholder for input type=date field

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

What I did is start with a text input field, then change the type to a date input when the input is in focus.

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

How do I simulate placeholder functionality on input date field?

I'm using the following CSS only trick:

  input[type="date"]:before {    content: attr(placeholder) !important;    color: #aaa;    margin-right: 0.5em;  }  input[type="date"]:focus:before,  input[type="date"]:valid:before {    content: "";  }

<input type="date" placeholder="Choose a Date" />

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>

Is there any way to change input type=date format?

It is impossible to change the format

We have to differentiate between the over the wire format and the browser's presentation format.

Wire format

The HTML5 date input specification refers to the RFC 3339 specification, which specifies a full-date format equal to: yyyy-mm-dd. See section 5.6 of the RFC 3339 specification for more details.

This format is used by the value HTML attribute and DOM property and is the one used when doing an ordinary form submission.

Presentation format

Browsers are unrestricted in how they present a date input. At the time of writing Chrome, Edge, Firefox, and Opera have date support (see here). They all display a date picker and format the text in the input field.

Desktop devices

For Chrome, Firefox, and Opera, the formatting of the input field's text is based on the browser's language setting. For Edge, it is based on the Windows language setting. Sadly, all web browsers ignore the date formatting configured in the operating system. To me this is very strange behaviour, and something to consider when using this input type. For example, Dutch users that have their operating system or browser language set to en-us will be shown 01/30/2019 instead of the format they are accustomed to: 30-01-2019.

Internet Explorer 9, 10, and 11 display a text input field with the wire format.

Mobile devices

Specifically for Chrome on Android, the formatting is based on the Android display language. I suspect that the same is true for other browsers, though I've not been able to verify this.