如何将datetime-local输入框分钟固定为00且不可选择？

因为无法使用step属性，我们可以通过初始化默认值+事件监听强制修正的方式，实现分钟固定为00且禁止选择其他分钟值的需求。

步骤1：修正基础配置与默认值 #

首先，datetime-local的min和max必须是完整的ISO格式（日期+时间），先通过JS设置正确的时间范围，同时给输入框设置默认的整点值。

修正后的HTML #

<input id="data_inizio" name="data_inizio" class="input" type="datetime-local" placeholder=" " />

基础初始化JS #

// 获取当前日期的ISO格式前缀（YYYY-MM-DD）
const today = new Date().toISOString().split('T')[0];
// 限定可选时间范围为当天09:00到17:00（整点）
const minDatetime = `${today}T09:00`;
const maxDatetime = `${today}T17:00`;
const input = document.querySelector('[name="data_inizio"]');

// 设置时间范围与默认值
input.setAttribute('min', minDatetime);
input.setAttribute('max', maxDatetime);
input.value = minDatetime; // 默认选中当天09:00

步骤2：添加事件监听强制修正分钟 #

监听输入框的input和change事件，不管用户是手动输入还是通过选择器选时间，自动将分钟替换为00，同时做边界值校验。

// 定义修正分钟为00的函数
const fixMinutesToZero = (e) => {
  const value = e.target.value;
  if (!value) return;
  
  // 替换时间部分的分钟为00
  const fixedValue = value.replace(/:\d{2}/, ':00');
  // 确保修正后的值在限定范围内
  if (fixedValue > maxDatetime) {
    e.target.value = maxDatetime;
  } else if (fixedValue < minDatetime) {
    e.target.value = minDatetime;
  } else {
    e.target.value = fixedValue;
  }
};

// 绑定事件
input.addEventListener('input', fixMinutesToZero);
input.addEventListener('change', fixMinutesToZero);

完整代码示例 #

HTML #

<input id="data_inizio" name="data_inizio" class="input" type="datetime-local" placeholder=" " />

JavaScript #

const today = new Date().toISOString().split('T')[0];
const minDatetime = `${today}T09:00`;
const maxDatetime = `${today}T17:00`;
const input = document.querySelector('[name="data_inizio"]');

// 初始化配置
input.setAttribute('min', minDatetime);
input.setAttribute('max', maxDatetime);
input.value = minDatetime;

// 强制修正分钟为00
const fixMinutesToZero = (e) => {
  const value = e.target.value;
  if (!value) return;
  
  const fixedValue = value.replace(/:\d{2}/, ':00');
  if (fixedValue > maxDatetime) {
    e.target.value = maxDatetime;
  } else if (fixedValue < minDatetime) {
    e.target.value = minDatetime;
  } else {
    e.target.value = fixedValue;
  }
};

input.addEventListener('input', fixMinutesToZero);
input.addEventListener('change', fixMinutesToZero);

功能说明 #

• 初始化时自动设置默认值为当天09:00，同时限定可选时间在当天09:00-17:00的整点区间
• 用户无论通过选择器选时间还是手动输入，都会被强制修正为分钟00的整点时间
• 额外做了边界校验，避免修正后的时间超出设定的范围

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