正文

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

IP云
IP云V管理员/6 阅读
08/19
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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