How do I simulate placeholder functionality on input date field?

Question

It\'s impossible to use placeholder on date fields but I really need it.

I want two date inputs with texts \"From\" and \"To\" on each one as placeholders.

Answer 1

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