如何设置datetime-local输入框的当日时间范围或仅限制最大日期为当日？

一、限制输入时间为当日08:00至17:00 #

datetime-local输入框的min和max属性需要遵循YYYY-MM-DDTHH:MM格式，我们可以通过JavaScript动态获取当前日期，拼接指定时间后赋值给对应属性，避免硬编码固定日期：

完整代码 #

<input class="date form-control" type="datetime-local" id="dt" name="tanggal_eksekusi_qa" required>

<script>
const dateInput = document.getElementById("dt");
const today = new Date();
// 提取YYYY-MM-DD格式的当日日期字符串
const dateStr = today.toISOString().split('T')[0];

// 设置最小时间为当日08:00
dateInput.min = `${dateStr}T08:00`;
// 设置最大时间为当日17:00
dateInput.max = `${dateStr}T17:00`;
</script>

代码说明 #

• today.toISOString().split('T')[0]：将当前日期转为ISO标准格式字符串后，截取前10位得到YYYY-MM-DD格式的日期；
• 通过模板字符串拼接时间部分，生成符合要求的min和max属性值。

二、仅限制最大日期为当日 #

如果只需要禁止用户选择当日之后的日期，可以将max属性设为当日的最后一分钟（23:59），这样用户只能选择当日及之前的日期：

完整代码 #

<input class="date form-control" type="datetime-local" id="dt" name="tanggal_eksekusi_qa" required>

<script>
const dateInput = document.getElementById("dt");
const today = new Date();
const dateStr = today.toISOString().split('T')[0];

// 设置最大日期为当日23:59
dateInput.max = `${dateStr}T23:59`;
</script>

注意事项 #

• datetime-local在主流现代浏览器中兼容性良好，但部分老旧浏览器可能不支持，建议提前测试目标环境；
• 若需要同时限制最小日期（比如不能选择过去的日期），可将min设为当前时间或当日00:00，逻辑与上述代码一致。

内容的提问来源于stack exchange，提问作者ProgrammerWannabe