最稳妥方案是手动用select+option生成时间选项，统一24小时制字符串（如"00:00"至"23:45"），跳过禁用时段，避免Date对象与时区干扰，禁用逻辑前置，移动端需权衡原生限制与模拟方案。
用 select + option 手动写时间选项最稳妥
浏览器原生不支持时间粒度可控的下拉控件， 是弹出时间选择器，不是下拉菜单。真要下拉，就得自己列 option —— 这是唯一能精确控制格式、禁用时段、兼容老浏览器的做法。
常见错误是试图用 new Date() 动态生成再塞进 select 却忘了时区偏移，或者用 toLocaleTimeString() 导致格式不一致（比如 “9:00 AM” 和 “09:00” 混用）。
- 按 15 分钟一档生成：从
"00:00"到"23:45"，统一用 24 小时制字符串，避免解析歧义 - 如果需支持中文显示（如 “上午 9:00”），必须前端硬编码或查表转换，别依赖
Intl.DateTimeFormat—— 它在 Safari 旧版里对hour12: true行为不一致 - 禁用不可选时段（如午休 12:00–13:30）：在生成
option时跳过对应范围，别靠 JS 后续disabled—— 屏幕阅读器可能忽略动态禁用
用 JavaScript 动态生成时注意 padStart 和时区
手写循环生成时间选项时，最容易漏掉补零和本地时区干扰。比如 new Date().getHours() 返回的是本地时间，但后端通常按 UTC 或固定时区存时间，前端显示却按用户本地时间，结果“8:00”在纽约和东京代表不同秒数。
正确做法是把时间当作纯字符串处理，不经过 Date 对象：
立即学习“前端免费学习笔记（深入）”；
这是一套由淘掌门(taozhangmen.net)衍生出来的一个拍拍客系统！这套程序也继承了淘掌门的特点：永久免费开源！无任何时间限制、功能限制、域名限制。 程序相对于淘掌门原型，已去除返利、会员系统、文章系统等。 如果需要文章，可单独下载其他的文章系统，做子目录，效果可能会更好。 程序安装过程与淘掌门相同： 下载上传到空间，执行 你的网址/install.php 安装完成后，登陆后台修改拍拍AP
const times = [];
for (let h = 0; h < 24; h++) {
for (let m = 0; m < 60; m += 15) {
const hourStr = String(h).padStart(2, '0');
const minStr = String(m).padStart(2, '0');
times.push(`${hourStr}:${minStr}`);
}
}
// 得到 ["00:00", "00:15", ..., "23:45"]
- 不用
h.toString(10).padStart(2, "0")——String(h)更直白，且padStart在 IE 不支持，若需兼容得手动补零 - 不要用
new Date(2000, 0, 1, h, m)再转字符串 —— 会触发时区换算，toISOString()又带日期部分，徒增复杂度 - 如果后端要求提交 12 小时制（如
"2:30 PM"），必须在提交前转换，而不是让select的value和text不一致 —— 那样容易在表单重置或 React 受控组件中出错
React/Vue 里别在 render 中重复生成时间数组
每次组件 re-render 都调用生成函数，不仅浪费 CPU，还可能导致 select 闪烁或失去焦点。时间选项是静态数据，跟 props 或 state 无关。
- React：提成模块顶层常量，或用
useMemo(() => [...], [])缓存 - Vue 2：定义在
data()外部，或用computed但加空依赖数组 - Vue 3：用
const timeOptions = computed(() => [...])，但确保依赖项为空 —— 否则响应式系统会误判更新时机 - 如果时间范围要随 prop 变（如只显示营业时间 9:00–18:00），才把起止时间作为
useMemo或computed的依赖，其余逻辑照旧
移动端 Safari 下拉体验差？加 size 或改用 datelist
iOS Safari 对 select 渲染极其保守，默认只显示一行，点开才弹原生选择器，完全不像桌面 Chrome 那样展开多行下拉。这不是 bug，是苹果故意限制交互方式。
- 加
size="5"属性能让它显示 5 行（但仅限桌面，移动端无效） - 想在移动端也保持下拉样式，只能放弃
select，改用input+list+datalist—— 但datalist不支持禁用选项，也不保证顺序，且 Firefox 里点击选项不会自动填充 - 真正跨端一致的方案是用 div 模拟下拉（如
react-select或@headlessui/react），但这就脱离了“HTML 原生”的前提 —— 你得先确认：到底是“必须用 HTML 标签”，还是“只要用户看起来是下拉”
时间下拉菜单的复杂点从来不在生成逻辑，而在于「显示格式」和「提交值」是否对齐、「禁用规则」是否可维护、「移动端行为」是否被测试覆盖。漏掉任意一个，上线后就会收到“为什么下午三点不能选”的工单。
