Angular中如何通过设置范围禁用时间选择器外的时间选项？

原生<input type="time">的min和max属性在不同浏览器中表现不一致：部分浏览器（如Firefox）会自动禁用超出范围的时间选项，但Chrome等浏览器仅在表单提交时做校验，不会隐藏或禁用下拉中的非法选项。要实现强制移除/禁用超出范围的选项，可以通过以下两种方案解决：

方案1：JavaScript实时校验+重置 #

通过监听输入事件，实时检查用户选择的时间是否在范围内，若超出则重置到最近的合法时间：

<input type="time" id="workTime" min="09:00" max="18:00" />

<script>
const timeInput = document.getElementById('workTime');
const [minHour, minMinute] = timeInput.min.split(':').map(Number);
const [maxHour, maxMinute] = timeInput.max.split(':').map(Number);

// 转换时间为分钟数，简化比较逻辑
const toMinutes = (hour, minute) => hour * 60 + minute;
const minTotal = toMinutes(minHour, minMinute);
const maxTotal = toMinutes(maxHour, maxMinute);

timeInput.addEventListener('input', () => {
  if (!timeInput.value) return;
  const [currentHour, currentMinute] = timeInput.value.split(':').map(Number);
  const currentTotal = toMinutes(currentHour, currentMinute);
  
  if (currentTotal < minTotal) {
    timeInput.value = timeInput.min;
  } else if (currentTotal > maxTotal) {
    timeInput.value = timeInput.max;
  }
});
</script>

方案2：针对特定浏览器禁用下拉选项 #

部分浏览器的时间选择器有可访问的DOM结构，可通过JS定位并禁用超出范围的选项（以Chrome为例）：

<input type="time" id="workTime" min="09:00" max="18:00" />

<script>
const timeInput = document.getElementById('workTime');
const [minHour, minMinute] = timeInput.min.split(':').map(Number);
const [maxHour, maxMinute] = timeInput.max.split(':').map(Number);

const toMinutes = (hour, minute) => hour * 60 + minute;
const minTotal = toMinutes(minHour, minMinute);
const maxTotal = toMinutes(maxHour, maxMinute);

// 聚焦时处理下拉选项
timeInput.addEventListener('focus', () => {
  // 延迟执行，确保下拉面板已渲染
  setTimeout(() => {
    // Chrome中时间选项的选择器，浏览器更新可能需要调整
    const hourOptions = document.querySelector('div.webkit-date-and-time-value select:first-child')?.options;
    const minuteOptions = document.querySelector('div.webkit-date-and-time-value select:last-child')?.options;
    
    if (hourOptions) {
      Array.from(hourOptions).forEach(option => {
        const hour = Number(option.value);
        // 处理小时超出范围的情况
        if (hour < minHour || hour > maxHour) {
          option.disabled = true;
        } else if (hour === minHour) {
          // 当小时等于最小小时时，禁用小于分钟最小值的选项
          Array.from(minuteOptions).forEach(minOpt => {
            if (Number(minOpt.value) < minMinute) {
              minOpt.disabled = true;
            }
          });
        } else if (hour === maxHour) {
          // 当小时等于最大小时时，禁用大于分钟最大值的选项
          Array.from(minuteOptions).forEach(minOpt => {
            if (Number(minOpt.value) > maxMinute) {
              minOpt.disabled = true;
            }
          });
        }
      });
    }
  }, 100);
});
</script>

注意事项 #

• 浏览器的时间选择器DOM结构可能随版本更新变化，方案2的兼容性有限；
• 如果需要跨浏览器稳定的效果，建议使用第三方时间选择器组件（如Flatpickr、Pickaday），这类组件原生支持时间范围限制，且表现一致。

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