PAYATHON 2026

如何用 <input type=datetime-local> 的 step 设置 15 分钟间隔？

技术老齐

15 分钟应写成 step="900"。datetime-local 的 step 以秒为单位，15 × 60 = 900。这些属性能约束输入值，但不能保证浏览器的选择面板只显示指定时间。如果要求用户只能看到并选择每天 08:00 至 18:00、间隔 15 分钟的选项，用日期输入框配合自动生成的 <select> 更合适。

step 限制有效值，选择面板由浏览器决定

step、min 和 max 定义输入值的约束。日期和时间选择器的样式、选项会因浏览器和操作系统而异，无法靠这些属性统一控制。

例如，只允许预约某一天的 08:00 至 18:00，可以这样写：

<form>
  <label for="bookingDateTime">预约日期和时间</label>
  <input
    type="datetime-local"
    id="bookingDateTime"
    name="bookingDateTime"
    min="2026-12-01T08:00"
    max="2026-12-01T18:00"
    step="900"
    required
  >
  <button type="submit">提交预约</button>
</form>

示例中的日期应替换成实际可预约日期。使用这些属性时：

  • datetime-local 的 min 和 max 必须包含日期，不能只写 min="08:00"。
  • 有效的 min 会作为步长计算基准。示例从 08:00 开始，每隔 900 秒一个有效值，因此 08:15 有效，08:10 不符合步长要求。
  • 选择面板显示的时间，也可能无法通过表单校验。

具体规则见 HTML 标准中的 datetime-local 和 step 定义。

跨日期的 min、max 无法表达每天的营业时间

假设设置：

min="2026-12-01T08:00"
max="2026-12-31T18:00"

这表示从 12 月 1 日 08:00 到 12 月 31 日 18:00 的连续范围，12 月 2 日的 03:00 也在其中。因此，要限制每天只接受 08:00 至 18:00 的预约，更适合把日期和时间拆开处理。

只显示指定时间：用循环生成 <select>

日期用 <input type="date"> 选择，时间下拉框用 JavaScript 生成。下面的代码可以直接放入页面：

<form>
  <p>
    <label for="bookingDate">预约日期</label>
    <input
      type="date"
      id="bookingDate"
      name="bookingDate"
      required
    >
  </p>

  <p>
    <label for="bookingTime">预约时间</label>
    <select id="bookingTime" name="bookingTime" required>
      <option value="">请选择时间</option>
    </select>
  </p>

  <button type="submit">提交预约</button>
</form>

<script>
  const timeSelect = document.getElementById("bookingTime");

  const startMinutes = 8 * 60;
  const endMinutes = 18 * 60;
  const intervalMinutes = 15;

  for (
    let minutes = startMinutes;
    minutes <= endMinutes;
    minutes += intervalMinutes
  ) {
    const hours = String(Math.floor(minutes / 60)).padStart(2, "0");
    const mins = String(minutes % 60).padStart(2, "0");
    const time = `${hours}:${mins}`;

    timeSelect.add(new Option(time, time));
  }
</script>

循环从 08:00 开始，依次生成 08:15、08:30 等选项，直到 18:00，共 41 个。按分钟数递增，就不用手动处理小时进位。

new Option(time, time) 的第一个参数是显示文字，第二个参数是提交值。原问题中的 <option value="08:00"></option> 没有显示文字，应写成：

<option value="08:00">08:00</option>

几十个 <option> 本身没有问题，用循环生成更便于维护。调整营业时间或间隔时，只需修改几个变量。如果页面需要在禁用 JavaScript 时仍能使用，也可以在服务端循环输出这些选项。

只要求校验时，也可以使用原生时间输入框

如果可以接受浏览器自带的时间选择界面，可以将日期输入框与下面的时间输入框配合使用：

<label for="bookingTime">预约时间</label>
<input
  type="time"
  id="bookingTime"
  name="bookingTime"
  min="08:00"
  max="18:00"
  step="900"
  required
>

type="time" 支持不带日期的 min、max，step 同样以秒为单位，见 HTML 标准的 Time state 定义。它能表达每天的时间约束，但不能保证选择面板只列出这些时间点。如果需要只提供指定选项，就用前面的 <select>。

预约边界还需要确认

代码允许在 18:00 开始预约，所以循环使用 <= endMinutes。如果要求拍摄必须在 18:00 前结束，应根据拍摄时长，将最后一个可预约时间提前。

接入预约服务时，服务端还应校验日期、时间间隔和营业时间，并检查时段是否已被占用。前端下拉框提供可选时间，最终能否预约以服务端校验为准。

备注：内容仅供参考。