The input type date is a very nice control introduced in HTML5. The problem is that it is very limited at this point and features such as placeholder may not available. Regardless, you may use it successfully if you are willing to make some css adjustments. In this post I will show how to add a placeholder to a date editor using minimal javascript and css. For the demo below I’m using vanilla css and vuejs just because it is so easy to use.
Since the placeholder attribute is not supported yet, we can use the :before pseudo element of the input. However, we only want to show the placeholder if the input is empty and not focused. We can control the empty/not empty via a simple binding that checks the date data property as shown below.
Most of the magic happens in CSS though:
That’s about it. You can see a working demo in https://jsfiddle.net/cfbpso5v/3
Cheers, Lucas