使input[type=date]支持placeholder方法

代码2019-03-291,303 人已阅来源:网络

问题:

input[type=date]不支持placeholder方法,这个就不再作太多的阐述

问题解决方法:

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

<input type="text" onfocus="(this.type='date')" id="" name="" placeholder="输入时间" value="2016-06-02" />

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

<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');
    }
});