input date显示类似placeholder效果 ios安卓兼容

先叨叨一个踩坑历程。

我最开始是使用了类似下面这种方式，最开始type为text，当进行点击后换成date。

在pc端测试的时候看起来还不错，但是到手机上测试发现，需要双击那个框框才能做到出现日历供选择。

<input type="text" onfocus="(this.type='date')" placeholder="Start Date" value="" />

后来查到了这篇blog，那时候觉得相见恨晚啊，人家都已经指出移动端会点击两下的问题了，也给了html+js的解决方案。

然而事情没那么简单QAQ

使input date支持placeholder方法

https://blog.csdn.net/qq_16494241/article/details/51564552

移动端点击两下才能选择日期的解决方法：

<input type="text" id="birthday" name="birthday" placeholder="请输入您的生日" />

$('#birthday').focus(function(){
    var obj = $(this);
    obj.prop('type','date');
    setTimeout(function(){obj.trigger('click');},10);
});

没填写时间时失去焦点恢复支持 placeholder

$('#birthday').blur(function(){
    var obj = $(this);
    if(!obj.val()){
        obj.prop('type','text');
    }
});

在我的安卓机上看起来非常不错，一切完美……可是ios上却出现问题啦QAQ

第一次点进浏览器打开网页，点那个框框，只能弹出键盘输入文字，就是不能弹出日历。

然后特地搜了下ios端解决方案，在Stack Overflow上看到这个帖子。

"input type=date" placeholder on IOS?

https://*.com/questions/9622420/input-type-date-placeholder-on-ios

基本上面那个方案呢，应该说是曾经work的，但是ios9更新之后好像就不work了。

然后试了一堆解决方案，最后抄抄改改，通过css控制，终于完成了这个需求QAQ

不过就是在PC端测试看起来会出现Start Datemm/dd/yy的样子，好在手机端显示正常。

<input id="startDate" type="date"  onfocus="this.removeAttribute('placeholder')" class="mui-input-clear" placeholder="Start Date" max="" min="" value="">

input[type="date"]:before{
	content: attr(placeholder);//强制给placeholder属性
	color:#FFF;
}

一只小菜鸟的踩坑笔记XD