这样做并没有隐藏时分选择器
时间: 2023-11-10 13:26:12 浏览: 72
Vue 用Vant实现时间选择器的示例代码
如果修改后仍然没有隐藏时分选择器,那可能是因为浏览器不支持或不兼容 step 属性。此时可以尝试使用 CSS 样式来隐藏时分选择器。具体做法是,将 input 元素的宽度设置为 100%,然后为其添加一个背景图,用背景图来覆盖时分选择器。代码示例如下:
```
<td>
<input
id="field_inDate"
data-cy="inDate"
type="datetime-local"
class="form-control hide-time"
name="inDate"
formControlName="inDate"
placeholder="YYYY-MM-DD HH:mm"
step="86400"
/>
</td>
<style>
.hide-time::-webkit-datetime-edit-fields-wrapper {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHElEQVR42mNkIAAYJqf///+v//z8DAAj8Av7Nk2uAAAAAElFTkSuQmCC') no-repeat;
background-size: 100% 100%;
padding-right: 20px;
}
</style>
```
这里给 input 元素添加了一个名为 hide-time 的 class,并在样式中为其设置了背景图和 padding-right 属性。这样就可以在大多数现代浏览器中隐藏时分选择器了。如果你需要支持更老旧的浏览器,可以使用 JavaScript 来修改 DOM 结构,或者使用一些第三方库来实现这个效果。
阅读全文