HTML | DOM 输入时间禁用属性

在开发网页中，我们常常需要在页面中插入输入时间的表单。不过，有时候我们需要禁用这个输入时间，比如表单只允许选择未来的时间，或者只允许选择某个时间段内的日期等等。为了实现这个功能，HTML提供了input标签的disabled和readonly属性。在这里，我们着重来介绍输入时间禁用属性。

input标签的type属性

首先，我们需要了解一下input标签的type属性，它可以设置输入框的类型。当我们需要输入时间时，需要将type属性设置为time。

<input type="time" name="time">

禁用输入时间属性

禁用输入时间属性的方法非常简单，在input标签中设置属性disabled即可。禁用后，输入框将无法响应用户的点击事件，也无法输入内容。

<input type="time" name="time" disabled>

禁用特定时间段内的时间

以上只是禁用输入时间的基本用法，接下来我们来看如何禁用特定时间段内的时间。这需要使用JavaScript来操作DOM。我们可以通过设置输入框的min和max属性来限制可选的时间段。首先，我们需要获取输入框的元素对象。

var timeInput = document.getElementsByName("time")[0];

然后，我们设置min和max属性的值。

var now = new Date();
var minTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9, 0, 0);  // 设置最小时间为当天的9点
var maxTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0);  // 设置最大时间为当天的18点
timeInput.min = minTime.toISOString().substr(11, 8);  // 赋值格式为"hh:mm:ss"
timeInput.max = maxTime.toISOString().substr(11, 8);

完整的代码如下：

<input type="time" name="time" id="timeInput">
<script>
    var timeInput = document.getElementById("timeInput");
    var now = new Date();
    var minTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9, 0, 0);  // 设置最小时间为当天的9点
    var maxTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0);  // 设置最大时间为当天的18点
    timeInput.min = minTime.toISOString().substr(11, 8);  // 赋值格式为"hh:mm:ss"
    timeInput.max = maxTime.toISOString().substr(11, 8);
</script>

只允许选择未来的时间

禁用特定时间段内的时间只是其中一种限制，有时候我们需要限制输入时间为未来的时间，比如不允许选择过去的时间。同样，这需要使用JavaScript来操作DOM。我们可以通过设置最小时间为当前时间，来实现只允许选择未来时间的限制。

var now = new Date();
var minTime = new Date(now.getTime() + 60000);  // 设置最小时间为当前时间的1分钟后
// 设置最小时间的小时和分钟，"hh:mm"格式
var minHour = minTime.getHours().toString().padStart(2, '0');
var minMinute = minTime.getMinutes().toString().padStart(2, '0');
timeInput.min = minHour + ":" + minMinute;

完整的代码如下：

<input type="time" name="time" id="timeInput">
<script>
    var timeInput = document.getElementById("timeInput");
    var now = new Date();
    var minTime = new Date(now.getTime() + 60000);  // 设置最小时间为当前时间的1分钟后
    // 设置最小时间的小时和分钟，"hh:mm"格式
    var minHour = minTime.getHours().toString().padStart(2, '0');
    var minMinute = minTime.getMinutes().toString().padStart(2, '0');
    timeInput.min = minHour + ":" + minMinute;
</script>

总结

通过HTML的禁用和JavaScript的操作DOM，我们可以实现各种限制输入时间的效果。在开发网页中，根据实际需求来选择合适的方案，既提高了用户体验，又增强了表单的安全性。