Safari浏览器不支持input type="time"，求可正常使用的替代方案

方案1：特性检测降级方案（无额外依赖） #

先做浏览器特性检测，支持input[type=time]的浏览器走原生控件逻辑，不支持的Safari等浏览器自动降级为带格式校验的文本输入框：
特性检测工具函数：

function isSupportTimeInput() {
  const testInput = document.createElement('input');
  testInput.type = 'time';
  return testInput.type === 'time';
}

完整实现代码：

<form action="/action_page.php">
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
  <input type="submit">
</form>

<script>
window.addEventListener('load', function() {
  if (!isSupportTimeInput()) {
    const timeInput = document.getElementById('appt');
    // 降级为文本输入
    timeInput.type = 'text';
    timeInput.placeholder = '请输入HH:mm格式时间，例如13:45';
    // 增加输入校验
    timeInput.addEventListener('blur', function() {
      const val = this.value.trim();
      const timeReg = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
      if (val && !timeReg.test(val)) {
        alert('时间格式错误，请输入HH:mm格式的有效时间');
        this.focus();
      }
    })
  }
})
</script>

方案2：下拉选择组件（全浏览器兼容） #

如果需要完全统一的交互体验，避免不同浏览器控件样式差异，可以把时间拆为小时、分钟两个下拉选择框，提交时拼接为标准时间格式即可，所有浏览器都可正常运行：

<form action="/action_page.php">
  <label>Select a time:</label>
  <select id="appt-hour" name="appt-hour" required></select>
  <span>:</span>
  <select id="appt-minute" name="appt-minute" required></select>
  <!-- 隐藏域存放最终拼接的时间值，提交给后端 -->
  <input type="hidden" id="appt" name="appt">
  <input type="submit">
</form>

<script>
// 生成小时选项 0-23
const hourSel = document.getElementById('appt-hour');
for(let i=0; i<24; i++) {
  const opt = document.createElement('option');
  opt.value = i.toString().padStart(2, '0');
  opt.textContent = opt.value;
  hourSel.appendChild(opt);
}
// 生成分钟选项 0-59
const minuteSel = document.getElementById('appt-minute');
for(let i=0; i<60; i++) {
  const opt = document.createElement('option');
  opt.value = i.toString().padStart(2, '0');
  opt.textContent = opt.value;
  minuteSel.appendChild(opt);
}
// 提交前拼接时间到隐藏域
document.querySelector('form').addEventListener('submit', function() {
  const timeStr = `${hourSel.value}:${minuteSel.value}`;
  document.getElementById('appt').value = timeStr;
})
</script>

注意事项 #

• 两种方案都需要做后端时间格式校验，避免前端校验被绕过导致非法数据入库
• 如果需要更复杂的时间选择交互（例如带时段选择、步长控制），可以基于方案2的逻辑做扩展调整

内容的提问来源于stack exchange，提问作者Gurkeerat Sondhi