手写时分秒选择器：补零、滚动联动与插件选型全解析

做前端时间久了你会发现越是不起眼的表单组件越考验功底。时间选择器就是典型代表看起来不过是从一堆数字里挑一个但真正做进项目里你会遇到补零、联动、滚动冲突、移动端适配、时区格式化等一系列问题。这篇文章我准备从零讲透“时分秒选择器”的实现思路再聊一聊怎么选一款省心的现成插件。不管你是刚接触JS的新人还是已经在业务里写过好几个表单的老手这篇内容应该都能给你一些可落地的参考。1. 先想清楚需求时间选择器到底要解决什么问题1.1 时间输入的常见形态与方案取舍时间选择器在业务里一般出现在排期、定时发布、预约提醒等场景。用户需要选择某个具体时刻比如“14:30:00”而不是只选一个日期。“时分秒”三个维度全要意味着选择器至少要有两级以上的联动关系这在交互上就比纯日期选择要复杂。目前市面上常见的形态大致有三种。第一种是三个独立下拉框小时一个、分钟一个、秒一个互不干扰。这种方式实现简单逻辑清晰缺点是操作路径长而且下拉选项在移动端上体验很生硬。第二种是输入框加弹出面板面板里用列表、滚轮或数字键盘来调整时间。这是主流方案兼顾了PC端精确操作和移动端滑动交互也是我下面会重点手写的方案。第三种是完全自由输入用户直接在输入框里打“14:30:00”再做格式校验和自动修正。这种方式最轻但对输入宽容度的要求很高用户一旦输入“14:3”或“143000”这类格式处理起来就会异常麻烦。1.2 为什么我推荐“滚动式”而不是“下拉式”我最早做时间选择器时第一个想法也是三个下拉框因为它的数据结构最好写三个字段互不依赖代码量也比较少。但后面在各种项目里用下来发现下拉框高频场景下效率不高。比如要设置一个“每30分钟执行一次”的定时任务用户得反复展开下拉、滚动列表、确认点击这种重复劳动很容易让人烦躁。滚动式选择器在这方面的优势很明显用户可以在同一个视口里连续滚动时分秒三列直观感受时间的变化效率高很多。再加上移动端天然支持滑动操作滚动式天然适配触屏场景。另一个关键点是滚动式选择器可以做得更“无压力”——用户不需要理解“下拉框里有哪些选项”只要上下滑动就能找到目标值学习成本极低。当然它不是没有缺点滚动式在快速操作时容易误触对精确落点的阻尼感要求比较高。最理想的形态是在PC端用滚轮细调在移动端用滑动和回弹来定位这也是我下面实现时采用原生滚动加scroll-snap的原因。1.3 核心功能清单与边界约定写代码之前我先列了一个功能清单全是实际项目中会碰到的点支持小时、分钟、秒三段独立选择范围分别为00-23、00-59、00-59。默认显示当前时间打开面板后自动滚动到当前时间对应的位置。点击面板外部或按Esc键时关闭面板避免遮挡周围内容。最终结果格式化为“HH:mm:ss”小时、分钟、秒都要补零。输入的初始值可能是字符串也可能是Date对象统一做一次格式化兼容。后续可能扩展禁用时段、步进限制等能力所以数据结构要留出扩展位。边界主要是分钟和秒超过59如何处理、小时超过23如何处理、非法值如何兜底。我的原则是“宁可在源头限制也不在结果上纠正”所以输入框使用readonly不允许用户自由键入所有值都来自面板选择这就从机制上杜绝了非法数据。2. 从零手写一个可用的时分秒选择器2.1 HTML骨架与CSS样式先搭建一个最简结构。容器是一个包裹输入框和弹出面板的div输入框负责展示最终值面板里放三列数据。div classtp-wrap idtpWrap input typetext idtpInput readonly placeholder点击选择时间 aria-label选择时间 div classtp-panel idtpPanel hidden div classtp-col>.tp-wrap { position: relative; display: inline-block; } .tp-panel { position: absolute; top: 40px; left: 0; display: flex; width: 240px; height: 220px; border-radius: 8px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); z-index: 100; } .tp-col { flex: 1; height: 220px; overflow-y: auto; scroll-snap-type: y mandatory; background: #fff; } .tp-item { height: 44px; line-height: 44px; text-align: center; cursor: pointer; color: #666; scroll-snap-align: center; font-size: 15px; transition: background-color 0.15s; } .tp-item.active { color: #1a1a1a; font-weight: 600; background: #f3f4f6; }scroll-snap-align: center 是关键之一。它让用户在滚动松手后某个选项会自动吸附到容器中间配合scroll-snap-type: y mandatory整个面板的交互会有明显的“停靠感”体验上接近原生iOS滚轮选择器。注意这里我刻意没加内部上下按钮。一是因为原生滚动已经足够好用二是按钮会把代码复杂度往上推而且按钮的重复点击体验并不比滚轮好。如果没有特别需求滚动就是最合理的交互。2.2 JavaScript核心逻辑实现HTML只是骨架真正的逻辑都在JS里。第一步是初始化三列数据。因为小时、分钟、秒的数值范围不同我统一用一个配置对象来描述然后按类型生成列表。const tpInput document.getElementById(tpInput); const tpPanel document.getElementById(tpPanel); const ITEM_HEIGHT 44; const PANEL_HEIGHT 220; const BASE_OFFSET (PANEL_HEIGHT - ITEM_HEIGHT) / 2; const RANGE { hour: 24, minute: 60, second: 60 }; const current { hour: 0, minute: 0, second: 0 }; const itemCollections {}; function initCol(type) { const col tpPanel.querySelector([data-type${type}]); const frag document.createDocumentFragment(); for (let i 0; i RANGE[type]; i) { const item document.createElement(div); item.className tp-item; item.dataset.value i; item.textContent String(i).padStart(2, 0); frag.appendChild(item); } col.appendChild(frag); itemCollections[type] col.querySelectorAll(.tp-item); }这段代码里有几个细节值得说明。用String(i).padStart(2, 0)来补零这是我目前比较推荐的方式简洁且可读性高。但要注意padStart是ES2017的语法如果项目需要兼容很老的浏览器不妨用传统写法。function pad(num) { return num 10 ? 0 num : num; }两种写法结果一致按项目实际情况选就行。继续往下核心函数是把某一个类型滚动到指定索引function scrollToValue(type, value) { const col tpPanel.querySelector([data-type${type}]); col.scrollTop BASE_OFFSET value * ITEM_HEIGHT; }这里需要重点解释一下BASE_OFFSET是什么。面板高220px每一项高44px(220 - 44) / 2 88px正好是面板顶部到“可视区域中间”的距离。如果第一项要居中对齐就得先把列表整体垫高88px。所以选中第0项时scrollTop是88选中第1项时scrollTop是132以此类推。如果不理解这个偏移量很容易出现“明明滚到了第5项高亮的却是第4项”的错位问题。这是时间选择器实现里非常经典的一个坑。接下来处理滚动事件。当用户滚动某列时根据当前的scrollTop计算出应该高亮的索引cols.forEach((col) { col.addEventListener(scroll, () { const type col.dataset.type; const rawIndex Math.round((col.scrollTop - BASE_OFFSET) / ITEM_HEIGHT); const index Math.min(RANGE[type] - 1, Math.max(0, rawIndex)); setActive(type, index); }); });计算方式很简单减去基础偏移量除以每一项的高度四舍五入取整再夹在有效范围之内。Math.round在这里比Math.floor更合适因为用户滚动到两项中间时离谁近就选谁交互手感会更自然。而Math.floor则会让用户感觉“要滚过一半才会触发切换”滞后感比较明显。setActive函数负责更新高亮和回填输入框function setActive(type, value) { if (current[type] value) return; current[type] value; const items itemCollections[type]; for (let i 0; i items.length; i) { items[i].classList.toggle(active, i value); } const parts [current.hour, current.minute, current.second].map((n) String(n).padStart(2, 0)); tpInput.value parts.join(:); }这里有一个性能小优化先判断current[type]是否等于value如果没变化就直接返回避免做无意义的DOM遍历。虽然在24/60/60级别数据量下性能差异不明显但这是一个好的编码习惯数据量大了以后收益会非常明显。2.3 点击、滚轮与外部关闭的交互细节最后是面板的展示与关闭逻辑。点击输入框时切换面板显示状态tpInput.addEventListener(click, (e) { e.stopPropagation(); const willShow tpPanel.hidden; tpPanel.hidden !willShow; if (willShow) { [hour, minute, second].forEach((type) { scrollToValue(type, current[type]); }); } });打开面板后三列会分别滚动到当前已选中的值位置高亮状态和输入框保持一致。关闭逻辑主要靠document级点击监听document.addEventListener(click, (e) { if (!e.target.closest(.tp-wrap)) { tpPanel.hidden true; } });用closest来判断点击区域是否在组件内部比我之前用contains判断多点几次元素要稳妥得多。如果你的组件内部还有其他按钮或子面板closest同样能覆盖到。滚轮这块我用了原生滚动加scroll-snap所以不需要单独监听wheel事件。有人会问PC上滚动时会不会把页面也一起滚实际上当鼠标停留在面板区域时原生滚动会优先作用于面板只有面板滚动到边缘后才会触发父容器滚动。这个行为在现代浏览器里已经处理得不错。如果想让面板在边缘时也不触发页面滚动可以加一点小手段后面章节会聊到。初始化调用也很简单[hour, minute, second].forEach(initCol); tpInput.value 00:00:00;如果你希望默认显示当前时间就改成const now new Date(); current.hour now.getHours(); current.minute now.getMinutes(); current.second now.getSeconds(); [hour, minute, second].forEach(initCol); setActive(hour, current.hour); setActive(minute, current.minute); setActive(second, current.second);到这里一个零依赖的分秒选择器已经能跑了。整个代码量不大核心逻辑集中在偏移计算和高亮同步上。如果你把这套逻辑梳理透后面不管换什么框架思路都能复用。3. 容易忽略的细节与兼容性处理3.1 数字补零一个小地方错了就很尴尬补零这件事看起来简单但它是时间选择器最容易翻车的地方之一。用户选择了上午9点5分如果展示成“9:5”数据拿出去无论是显示还是入库都会出问题。我见过不少代码喜欢用字符串拼接的方式判断const str (value 10 ? 0 : ) value;这个写法很直观性能也不差。但如果你用padStart有一点必须注意它不只是“补零到2位”而是“从头开始补字符到指定长度”。如果你误写成String(value).padStart(2, )你得到的会是“ 9”而不是“09”这个问题我实际遇到过排查了一阵子才发现是padStart的参数写错了。另外一个隐藏细节是当时间组件接收外部传入的初始值时外部数据可能是“9:05”也可能是“09:05”还可能带了AM/PM。我建议在组件入口处统一做一次格式化把所有输入值都规整成Date对象或标准字符串内部只认一种格式这是很多组件库都在用的做法。3.2 禁用时段、步进限制与非法输入兜底如果你做的需求是“只允许8点到18点之间排期”或者“分钟只能按5分钟递增”那选择器不能只做展示还要在交互层就拦截非法值。先说步进限制。假设分钟只能选00、05、10……55数据生成时直接用step步进const STEP 5; for (let i 0; i 60; i STEP) { const item document.createElement(div); item.dataset.value i; item.textContent String(i).padStart(2, 0); col.appendChild(item); }注意这里不像之前那样直接渲染60条而是渲染12条索引和实际值的对应关系要重新算。这种场景下我建议把“索引”和“值”拆开item.dataset.value存真实值高亮时比对真实值而不是索引这样逻辑清晰得多。再说禁用时段。最简单的方式是提供一个回调函数比如function isDisabled(type, value) { if (type hour) return value 8 || value 18; return false; }然后在滚动时判断如果当前值属于禁用范围可以把对应item置灰并在选中逻辑里跳过。但要注意直接跳过会让用户感觉滚轮“卡住”更合理的做法是允许滚动到禁用值但选中的高亮和目标值都保持原来未禁用状态同时输入框不更新。这个取舍要根据业务场景来定有些场景用户需要看到“这个时段不能选”的反馈有些场景则希望直接把不能选的时段隐藏掉没有统一标准但设计时一定要想清楚。非法输入的兜底主要靠readonly属性。我在前面说过readonly能从根本上阻止用户键入非法格式但有些业务确实需要允许用户直接输入这种时候必须在blur时做全面校验。最简单的方案是把输入值拆分成年月日时分秒逐个用Number()转换并检查范围任何一个不符合就回退到上一次合法值。这个方案虽然保守但确实最稳。3.3 移动端触摸、滚动穿透与无障碍移动端上原生滚动加scroll-snap基本能胜任大部分场景。手指滑动、松手回弹、自动吸附浏览器都帮你做了组件代码几乎不用改。真正需要处理的是滚动穿透问题当用户在面板上滑动时页面本身也可能跟着滚动。解决滚动穿透有几个思路。一种是给面板设置overscroll-behavior: contain让滚动在到达边界时不再向外传播.tp-panel { overscroll-behavior: contain; }另一种是在touchmove事件里调用preventDefault但这种方式会连带牺牲面板内部的滚动所以一般不推荐整个panel直接阻止touchmove而是加在panel的父容器上。实际项目中我给面板设置overscroll-behavior: contain之后滚动穿透的问题就基本解决了代码量最少。另外还有无障碍需求。许多做后台系统的开发者容易忽略这一点但如果你负责的是政务、医疗这类对可访问性有硬性要求的项目就必须考虑键盘操作和读屏器。readonly输入框本身可聚焦也能显示当前值但读屏器用户无法感知面板里具体有哪些选项所以我建议给输入框加上aria-label同时为面板的打开和关闭状态添加aria-expandedinput typetext idtpInput readonly placeholder点击选择时间 aria-label选择时间 aria-expandedfalse 虽然本地上面的示例没完全做键盘全流程支持但如果要在生产环境使用至少要把打开、关闭、选择后同步aria-expanded的代码补上。这部分工作不复杂但对有需求的用户来说价值很大。4. 插件推荐与选型指南4.1 评估一个时间选择器插件的五个维度很多同学一上来就直接搜npm看下载量最高的就装。但下载量高不代表适合你的项目时间选择器这种功能单一的小组件其实比大而全的日期库更需要精细筛选。我的评估维度主要有五个。第一是体积。时间选择器再大也不该消耗太多打包体积尤其是移动端H5场景。安装前用打包分析工具看一眼引入后的实际体积小于20KB是可接受的范围如果超过50KB就要谨慎了。第二是维护活跃度。看仓库最近的提交时间、issue回复速度、是否还在发版。一个三年前就不再更新的选择器即使功能再全也不建议用在需要长期维护的项目里。第三是定制能力。你需要禁用时段、步进、自定义格式等功能时插件是否暴露了足够的配置项如果只能靠改源码来拓展功能那就要犹豫一下。第四是UI整合难度。时间选择器一定要跟着项目的视觉风格走如果插件自带一套很难覆盖的样式或者主题定制机制特别复杂后期维护成本会很高。第五是键盘与无障碍支持。这一点容易被忽视但对一些特定行业项目来说可能是硬性要求。4.2 不同场景下的推荐方向根据这几个维度我把现成的插件方案大致分成三类。第一类是“经典全能型”适合中后台管理系统。这类方案通常体积较大功能很全自带节假日、日期范围、快捷选项等能力时间选择只是其中一个子模块。它们的主题定制能力一般都比较强适合视觉规范完善的B端项目。缺点是为了通用性引入了不少你根本用不上的代码。第二类是“轻量移动端型”适合H5、小程序、混合App。这类方案追求的是体积小、手势体验好交互上多以滑动滚轮为主样式干净定制起来也比较容易。缺点是功能相对单一遇到复杂的日期范围联动时需要额外开发。第三类是“框架绑定型”专门为某种前端框架设计比如只支持Vue或只支持React。这类方案的优点是接入成本极低组件生命周期与框架深度融合状态管理更自然。缺点是换框架时需要重新选型项目迁移成本大。根据我的经验选型流程应该是这样先看你项目里是否已经有成熟的UI组件库很多组件库自带的时间选择器已经完全够用这种时候没必要再引一个额外的库。如果组件库自带的样式和你业务差距太大或者没内置秒级选择再去看独立的轻量插件。如果你发现插件改动成本都太高那就回到第二章节手写方案自研反而可能是成本最低的选择。4.3 一个折中方案桌面级UI组件库自带的TimePicker很多项目实际上已经引入了一套完整的UI组件库里面大概率就有TimePicker。这类组件如果你的UI库版本够新通常在联动、禁用、格式化方面都做得不错。使用内置组件有一个隐含前提就是你的项目愿意跟着组件库的升级节奏走。如果你停留在老版本组件可能没有秒级选择或者时间格式化和你的后端约定不一致。遇到这种情况我通常会用小封装包一层对外暴露自己约定的时间字符串格式避免业务代码到处散落format的处理逻辑。另外值得注意的是UI内置组件在交互样式上基本固定想改成“滚轮式”很难除非组件本身支持切换。如果你一定需要滚轮式轻量方案或者自研会更合适。所以“直接用UI库的TimePicker”更多是一个省心的折中需要你对定制要求放得很低。我自己的习惯是把“自研”列为最后选项但绝不排斥自研。因为时间选择器这类组件看似简单实际包含滚动定位、格式化、时区处理、事件管理这些内容写一次能让你对整个前端交互细节有更深的理解。如果你已经有成熟插件可用业务又急那就别重复造轮子但如果你有空余时间手写一个绝对不是浪费时间。5. 实操踩坑记录与排查思路5.1 问题一滚轮事件导致整个页面跟着滚动我在早期做滚动式选择器时犯过一个典型错误为了获取滚动位置给面板加了wheel事件并在事件里执行preventDefault。结果在部分浏览器上preventDefault不仅拦住了页面滚动还把面板自身的滚动也拦住了用户根本滑不动列表。后来排查才发现wheel事件的preventDefault行为在不同浏览器下的默认语义不一致。最稳妥的做法是不要手动监听wheel去做滚动逻辑直接用原生滚动加scroll-snap让浏览器自己管理滚动行为。如果你一定要在wheel事件里做点逻辑比如节流更新高亮请确保用addEventListener的passive: false参数来注册否则preventDefault会被浏览器忽略反而出现页面滚面板不滚的问题。5.2 问题二秒级高频刷新导致页面卡顿有一个场景是定时任务的“当前时间倒计时展示”每秒都在更新而选择器列表的scroll事件也在高频触发。两个功能叠在一起页面出现明显的卡顿。排查后发现scroll事件本身并不慢真正慢的是在scroll回调里频繁查询DOM并修改class。我加了一个很简单的节流处理用requestAnimationFrame把更新逻辑包起来只在浏览器绘制帧时执行避免一帧内多次重复计算。代码概览如下let ticking false; col.addEventListener(scroll, () { if (ticking) return; ticking true; requestAnimationFrame(() { updateActiveByScroll(col); ticking false; }); });这个改动之后滚动流畅度有非常明显的提升。另外我还把itemCollections里的querySelectorAll结果缓存下来避免每次滚动都重新查询DOM这也是一个见效很快的优化。5.3 问题三时区格式化错位8点变0点这个坑出在一个定时发布的需求里。后端返回的时间字符串是“2026-10-12 08:00:00”前端用标准解析后组件选到8点提交时却变成了0点。原因是解析时没注意字符串是否带时区信息浏览器默认把不带时区的字符串当作本地时间但某些接口框架又会无意识地进行UTC转换。Get时间的标准做法是const date new Date(2026-10-12T08:00:00); const hour date.getHours();如果你看到console里输出的是0多半是系统把“08:00:00”按UTC解析了然后本地时间偏移后变成了0点。解决方式有两个方向。一个是约定好前后端都传时间戳一个是约定好字符串格式并在解析时显式指定时区。最怕的是前后端各用各的没有统一约定。这块虽然属于数据层的问题但时间选择器往往是暴露出问题的第一现场做前端的时候心里要有这根弦。5.4 问题四面板层级不够被其他元素挡住这也是常见问题。面板是绝对定位的元素如果外层容器设置了overflow: hidden或者某个兄弟元素的z-index更高面板就可能被裁剪或遮挡。排查方法很简单打开浏览器开发者工具找到面板元素看它的堆叠上下文。一般情况下把面板的z-index设置得足够大比如100或更大就能解决。但如果外层有transform属性它就会创建新的层叠上下文此时z-index只能在那个上下文内部生效。这种时候要把面板挂载到body下或者用弹出层组件而不是继续调z-index。最后再分享一个我个人的习惯不管是用现成插件还是自研组件我都会把时间值的来源和去向单独封装成一个小模块统一做格式化、校验和时区处理。这样做的好处是当产品经理某天突然说“时间格式从冒号改成中文数字”时你只需要改一个文件而不是到处找replace。时间选择器的技术难点其实不算高真正容易被拖垮的是各种边界情况。希望这篇内容能帮你少踩几个坑在实现或选型时分秒选择器时更有底气。