简单方法让input date支持placeholder(包含ios手机端方法)

<input class="baixin-quan-info-box-time" type="text" onfocus="(this.type='date')" placeholder='起始时间' v-model="tnianxian1">

 先使其 type 为 text,此时支持 placeholder,当触摸或者聚焦的时候,使用 JS 切换使其触发 datepicker 功能。以上方法在ios系统会出现重复点击2次才能出时间选择器,改进方法如下:

<input :class="'l-d-box-alone-ipt'+(yy_time?' full':'')" v-model="yy_time" onfocus="(this.type='date')" placeholder="select a date" type="date">

css:
input[type="date"].full:before {
            color: black;
            content: ""!important;
        }

        input[type="date"] {
            direction: ltr;
        }
input[type="date"]:before {
            color: #A9A9A9;
            content: attr(placeholder);
        }
js:
$("input[type='date']").on("input", function() {
                        console.log($(this).val().length)
                        if ($(this).val().length > 0) {
                            $(this).addClass("full");
                        } else {
                            $(this).removeClass("full");
                        }
                    });

 

posted @ 2019-08-08 09:49  怪咖咖  阅读(1084)  评论(0编辑  收藏  举报