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

Ok, so this is what I have done:

$(document).on('change','#birthday',function(){
    if($('#birthday').val()!==''){
        $('#birthday').addClass('hasValue');
    }else{
        $('#birthday').removeClass('hasValue');
    }
})

This is to remove the placeholder when a value is given.

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

On focus or if .hasValue, remove the placeholder and its margin.