input type=date 的兼容性等问题

HTML5 input date 移动端 IOS 不支持问题（不支持显示是：默认的样式是年/月/日然后是有上下小三角的箭头。）

 

 

桌面端（Mac）

    Safari 不支持 datepicker，placeholder 正常显示。

    Firefox 不支持 datepicker，placeholder 正常显示。

    Chrome 支持 datepicker，显示 年、月、日 格式，忽略 placeholder。

 

移动端

    iPhone5 iOS7 有 datepicker 功能，但是不显示 placeholder。

    Andorid 4.0.4 无 datepicker 功能，不显示 placeholder

 

从上面可以看出，iOS 上会有 date 不会显示 placeholder 文字，Android 部分机型没有 date 也不会显示 placeholder 文字。但是为了统一表单外观，往往需要显示。

 

解决方法：

先使其 type 为 text，此时支持 placeholder，当触摸或者聚焦的时候，使用 JS 切换使其触发 datepicker 功能。

<inputplaceholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

 

 

 

还有个解决方法：先删除他的placeholder的属性再添加上。

$("input[type='date']").bind({
            focus:function(){ $(this).removeAttr("placeholder"); },
            blur:function(){ 
                if($(this).val()== ''){ $(this).attr("placeholder","日期的默认值"); }
            }
       })