<td> <input id="field_inDate" data-cy="inDate" type="datetime-local" class="form-control" name="inDate" formControlName="inDate" placeholder="YYYY-MM-DD HH:mm" step="86400" /> </td>这么做只是让客户无法操作框内的时分数据但是仍然可以操作时分控件
时间: 2023-07-06 07:43:12 浏览: 114
HTML5中input[type=’date’]自定义样式与日历校验功能的实现代码
5星 · 资源好评率100%
是的,你说得对。step 属性只是限制了用户输入的时间精度,但实际上浏览器仍会显示时分控件,用户仍然可以通过控件来选择时分。如果你想完全隐藏掉时分控件,那么可以使用 JavaScript 或者 jQuery 来实现。
以下是一个使用 jQuery 的示例代码:
```
<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"
/>
</td>
<script>
$(function() {
// 获取 input 元素
var $input = $('#field_inDate');
// 获取当前时间的日期部分
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var dateString = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
// 设置 input 元素的值为当前时间的日期部分
$input.val(dateString);
// 禁用 input 元素的时分控件
$input.on('focus', function() {
$(this).prop('type', 'date');
}).on('blur', function() {
$(this).prop('type', 'datetime-local');
});
});
</script>
<style>
.hide-time::-webkit-datetime-edit-fields-wrapper {
display: none;
}
</style>
```
这里使用了 jQuery 的 $ 函数来获取 input 元素,并在页面加载完成后执行一个回调函数。在回调函数中,首先获取当前时间的日期部分,并将其设置为 input 元素的值。然后,在 input 元素获得焦点时,将其 type 属性设置为 "date",这样就可以禁用时分控件了。最后,在 input 元素失去焦点时,将其 type 属性设置为 "datetime-local",以便用户可以再次选择日期和时间。
注意,这里还添加了一些 CSS 样式来将时分控件隐藏,以确保用户无法通过控件选择时分。
阅读全文