如何用<input type=datetime-local>实现8-18点15分钟间隔时段选择？

针对你遇到的原生datetime-local控件不生效、手动编写下拉选项过于冗长的问题，这里提供几个更优的替代方案：

1. 修正原生<input type="datetime-local">的配置 #

你之前的问题大概率是min/max的格式错误——原生控件要求这两个属性必须是完整的日期时间格式（YYYY-MM-DDTHH:MM），且step的单位是秒（15分钟=900秒）。修正后的代码如下：

<input type="datetime-local" 
       name="bookingTime" 
       id="bookingTime"
       min="2024-01-01T08:00"
       max="2024-12-31T18:00"
       step="900">

现代浏览器会严格按照配置限制可选时间范围和15分钟的间隔，无需手动维护选项。如果需要适配旧浏览器，可以搭配JS做辅助校验。

2. 用JavaScript动态生成下拉选项 #

如果偏好下拉选择的交互，不要手动编写50+行选项，用JS循环自动生成，代码更简洁易维护：

<select name="bookingTime" id="bookingTime"></select>

<script>
const timeSelect = document.getElementById('bookingTime');
// 配置时间范围：8:00 到 18:00，间隔15分钟
let hour = 8;
let minute = 0;

// 循环生成所有有效时间选项
while (hour < 18 || (hour === 18 && minute === 0)) {
    // 格式化时间为HH:MM格式
    const timeValue = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
    const option = document.createElement('option');
    option.value = timeValue;
    option.textContent = timeValue;
    timeSelect.appendChild(option);

    // 累加15分钟
    minute += 15;
    if (minute >= 60) {
        minute -= 60;
        hour += 1;
    }
}
</script>

后续要调整时间范围或间隔，只需修改起始/结束时间变量，无需手动修改大量HTML代码。

3. 自定义轻量时间选择组件 #

如果想要更贴合摄影网站风格的交互（比如日历+时间按钮的组合），可以自己实现轻量组件：

• 用一个隐藏的input存储最终选中的时间值
• 点击触发按钮弹出模态框，展示日历（可选日期）和按15分钟间隔排列的时间按钮
• 点击时间按钮后，将选中的日期+时间填充到隐藏input，并关闭模态框
  这种方案完全可控样式和交互，能更好地匹配网站的视觉设计。

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