Mobile Input[type=date] When placeholder not work solution

Currently the PC-side support for the date type of input is not good, and the result I tried is only chrome support. Firefox, IE11 are not supported. And there are many calendar controls available on the PC side. You don't have to think about it much.
iOS and Android are supported on the mobile side, but the placeholder property is invalidated when the type is date. PC-side Chrome default display is "Year/month/day", but on the mobile side is a blank.
The date control that comes with the mobile side is really a good thing. Let the user fill in when the experience is very good, very convenient. For the front end, you can omit the verification date format. How can such a good thing be discarded.
The value of input can be set by an attempt, but it must be a date format to be displayed correctly, otherwise it will be ignored directly.

1	<input Type="Date" value="2012-05-10" id="Date">

But when the demand needs to tell the user what to fill out here, it is not enough to be a date alone. The current rejection plan is to combine CSS and JS to solve this problem.

CSS Section

Using pseudo-class to simulate a placeholder for input

1234	input[type= "Date"]:before{ content: attr(placeholder); color:red; }

This is not enough, you will find that after the user has chosen the date we simulated the default text is still in.

JS section

Now that we have used the placeholder attribute, we delete this attribute when the user chooses it, and then add it back if needed.

1234567

var o = document. getElementById(' Date '); o. onfocus = function(){ This . RemoveAttribute(' placeholder '); };o. onblur = function(){ If(this. Value = = ") this . SetAttribute(' placeholder ',' I am the date '); };

By the way, input of non-date type set placeholder color CSS

123	::-webkit-input-placeholder { color:red; }

Mobile Input[type=date] When placeholder not work solution