如何为datetime-local输入预加载仅时间或设时间可选（日期必填）

基础用法 #

原生<input type="datetime-local">需要完整的YYYY-MM-DDTHH:mm格式值来设置默认日期时间，示例：

<input type="datetime-local" value="2017-06-01T08:30" required/>

目标效果实现 #

要达成仅预加载默认时间（日期由用户选择），或日期必填、时间可选的需求，原生HTML无法直接通过value="YYYY-MM-DDT12:05"这类占位符写法实现，需结合JavaScript处理：

1. 预加载指定时间+自动填充当前日期

打开页面时自动填入当前日期和预设时间，代码示例：

<input type="datetime-local" id="datetimeInput" required/>

<script>
const input = document.getElementById('datetimeInput');
const currentDate = new Date().toISOString().split('T')[0];
// 设置默认时间为12:05
input.value = `${currentDate}T12:05`;
</script>

2. 强制日期必填、允许时间留空

通过JS校验确保用户必须选择日期，时间可填可不填：

<input type="datetime-local" id="datetimeInput" required/>

<script>
const input = document.getElementById('datetimeInput');
input.addEventListener('input', () => {
  const [datePart] = input.value.split('T');
  if (!datePart) {
    input.setCustomValidity('必须选择日期');
  } else {
    input.setCustomValidity('');
  }
});
</script>

预期效果展示 #

内容的提问来源于stack exchange，提问作者Philip F.