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