前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载TimePicker 是 ant-design-vue 中用于“选择/输入时间”的数据录入组件点击输入框即可从弹出面板中选择时分秒。本文以 components/time-picker/index.en-US.md 为骨架结合仓库源码与真实 demo系统讲解 TimePicker 的全部 Props、事件、方法、TimeRangePicker 范围选择以及它如何通过 dayjs / moment / date-fns 三种日期库适配器运行帮助你开箱即用并理解其内部机制。When To Use何时使用当你需要用户通过点击输入框、从弹出面板中选取一个具体时间而非日期时就使用 TimePicker。它支持 12/24 小时制、分钟/秒步长、禁用部分时间段、范围选择TimeRangePicker等常见业务场景。与 DatePicker 相比TimePicker 聚焦于HH:mm:ss粒度的时间输入。快速上手基本用法TimePicker 通过v-model:value双向绑定时间值。默认绑定值为 dayjs 对象若传入value-format则绑定值为对应格式的字符串。官方 basic.vue 展示了两种典型用法template a-space directionvertical !-- 默认value 为 Dayjs 对象 -- a-time-picker v-model:valuevalue / !-- 指定 value-formatvalue 为字符串 -- a-time-picker v-model:valuestrValue value-formatHH:mm:ss / /a-space /template script langts setup import dayjs, { Dayjs } from dayjs; import { ref } from vue; const value refDayjs(dayjs(08:00:00, HH:mm:ss)); const strValue refstring(09:00:00); /script不指定value-format时value为 dayjs 实例指定后绑定值变为格式化后的字符串change事件同样会返回对应类型。范围选择只需换成a-time-range-picker见 range-picker.vue。API 参考全部 Props 详解以下参数以官方文档为准并补充仓库源码 time-picker.tsx 中声明、文档未列出的扩展项。PropertyDescriptionTypeDefaultVersionallowClear是否允许清除已选时间booleantrueautofocus组件挂载后是否自动获取焦点booleanfalsebordered是否有边框样式booleantrueclearIcon自定义清除图标v-slot:clearIcon-clearText清除图标的 tooltip 文案stringcleardisabled是否禁用 TimePickerbooleanfalsedisabledTime指定不可选择的时间段DisabledTime-3.3.0format时间显示/解析格式stringHH:mm:ssgetPopupContainer浮层挂载容器默认在 body 下新建 divfunction(trigger)-hideDisabledOptions是否隐藏不可选的选项booleanfalsehourStep小时步长间隔number1inputReadOnly给 input 标签设置readonly避免触屏设备弹出虚拟键盘booleanfalseminuteStep分钟步长间隔number1open (v-model)是否弹出面板booleanfalseplaceholder无值时的占位提示string | [string, string]Select a timeplacement选择框弹出位置bottomLeftbottomRighttopLefttopRightbottomLeftpopupClassName面板的 classNamestring-popupStyle面板的样式CSSProperties-renderExtraFooter在面板底部渲染额外内容v-slot:renderExtraFooter-secondStep秒步长间隔number1showNow是否在面板显示「现在」按钮boolean-suffixIcon自定义后缀图标v-slot:suffixIcon-use12Hours12 小时制显示默认格式为h:mm:ss abooleanfalsevalue (v-model)设置时间dayjs-valueFormat可选绑定值的格式不指定时绑定值为 Date 对象stringdate formats-源码补充除上表外time-picker.tsx 的timePickerProps还声明了statusInputStatus 校验状态、showHour、showMinute、showSecond三个面板列显隐开关以及范围选择专用的order默认true见 time-picker.tsx。这些 Props 会随组件透传给内部 Picker因此同样可配置使用。常用属性组合实战禁用整个选择器disabled.vuea-time-picker :valuedayjs(12:08:23, HH:mm:ss) disabled /只选时分当format省略某一部分时面板对应列会自动消失hide-column.vuea-time-picker v-model:valuevalue formatHH:mm /步长选项interval-options.vuea-time-picker v-model:valuevalue :minute-step15 :second-step10 /面板中的分钟/秒选项会按 15、10 的间隔展示。12 小时制12hours.vuea-time-picker v-model:valuevalue use12-hours / a-time-picker v-model:valuevalue use12-hours formath:mm:ss A stylewidth: 140px / a-time-picker v-model:valuevalue use12-hours formath:mm a /开启use12Hours后默认格式为h:mm:ss a同时面板会出现上/下午切换。DisabledTime精确控制不可选时间disabledTime3.3.0用于在回调层面排除不可选的时间段例如限制员工只能选择工作时段。其类型定义为type DisabledTime (now: Dayjs) { disabledHours?: () number[]; disabledMinutes?: (selectedHour: number) number[]; disabledSeconds?: (selectedHour: number, selectedMinute: number) number[]; };disabledHours返回需要禁用的小时数组如[0,1,2,3]disabledMinutes(selectedHour)根据已选小时返回禁用的分钟数组disabledSeconds(selectedHour, selectedMinute)根据已选小时、分钟返回禁用的秒数组。典型用法——只允许选择 9:00–18:00 之间的时间a-time-picker :disabled-timedisabledTime / script langts setup import { Dayjs } from dayjs; const disabledTime (now: Dayjs) ({ disabledHours: () (now.hour() 9 || now.hour() 18 ? [now.hour()] : []), }); /script配合hideDisabledOptions默认false可决定被禁用的选项是灰显还是直接隐藏。事件 EventsEvents NameDescriptionArgumentschange选中时间变化时触发function(time: dayjs | string, timeString: string): voidopenChange面板打开/关闭时触发(open: boolean): void从源码 time-picker.tsx 可以看到内部事件的转发链onChange会依次emit(update:value, value)与emit(change, value, dateString)并通知 FormItemContext 字段已变更formItemContext.onFieldChange()onOpenChange同步update:open与openChange此外还透传focus、blur、ok点击「确定」事件。对于范围选择器还会额外触发panelChange、calendarChange。实例方法 MethodsNameDescriptionblur()移除焦点focus()获取焦点两个方法通过组件expose暴露见 time-picker.tsx可在模板中配合ref调用a-time-picker refpickerRef / script langts setup import { ref } from vue; const pickerRef ref(); // pickerRef.value.focus(); // 聚焦 // pickerRef.value.blur(); // 失焦 /script仓库测试 index.test.js 通过focusTest(TimePicker)对该能力做了统一的焦点行为验证。TimeRangePicker时间范围选择TimeRangePicker 继承自 DatePicker 的 RangePicker 全部属性额外包含以下参数PropertyDescriptionTypeDefaultVersionorder是否对起止时间自动排序booleantruedisabledTime指定不可选择的时间段RangeDisabledTime-3.3.0用法与单值选择器一致例如placeholder支持二元组、value为[start, end]数组。其order属性在源码中默认truetime-picker.tsx保证用户反选时自动交换起止时间。RangeDisabledTimetype RangeDisabledTime ( now: Dayjs, type start | end, ) { disabledHours?: () number[]; disabledMinutes?: (selectedHour: number) number[]; disabledSeconds?: (selectedHour: number, selectedMinute: number) number[]; };与单值DisabledTime相比回调额外接收type参数用于区分当前限制的是起始时间还是结束时间从而可以实现“结束时间必须晚于起始时间”之类的联动校验。底层实现三种日期库适配器与统一工厂TimePicker 的实现并非独立组件而是由 time-picker.tsx 中的createTimePicker(generateConfig)工厂函数基于 date-picker 的generatePicker生成TimePicker与TimeRangePicker两个组件。仓库为其内置了三套日期库适配器入口dayjs.tsx默认入口index.tsx直接导出它使用dayjsGenerateConfigmoment.tsx使用momentGenerateConfig绑定值为 Moment 对象date-fns.tsx使用dateFnsGenerateConfig绑定值为原生 Date 对象。三者的 Install 逻辑一致Object.assign(TimePicker, { TimePicker, TimeRangePicker, install })因此可通过app.component全局注册ATimePicker与ATimeRangePicker。这正是 FAQ 中“替换日期库”能力的来源——你可以在构建时选择不同的入口文件来使用 moment.js / dayjs / date-fns具体步骤请参阅官方文档中的 replace-date 专题。值得注意的细节addon插槽/属性已被标记为废弃源码 time-picker.tsx 会通过devWarning提示改用v-slot:renderExtraFooter对应的测试 index.test.js 同时验证了renderExtraFooter的渲染与废弃警告的输出。另外allowClear{false}时清除按钮不会渲染也有对应快照测试覆盖index.test.js。FAQ如何搭配自定义日期库使用 DatePicker如需使用 moment.js、dayjs 或 date-fns 中的任意一种日期库请参考仓库提供的三套入口文件dayjs.tsx、moment.tsx、date-fns.tsx以及官方文档的 replace-date 专题说明按其指引替换入口即可该机制对 DatePicker、TimePicker 及 RangePicker 一视同仁。小结TimePicker 的完整能力矩阵包括v-model:value双向绑定与value-format字符串化、disabledTime精细禁用、hourStep/minuteStep/secondStep步长、use12Hours12 小时制、placement/popupClassName/popupStyle浮层定制、renderExtraFooter/suffixIcon/clearIcon插槽扩展以及focus()/blur()实例方法。理解其createTimePicker工厂 三套日期库适配器的架构后你不仅能熟练使用还能在需要自定义日期库时迅速定位改造点。赞分享前端UI组件设计系统【免费下载链接】ant-design-vue An enterprise-class UI components based on Ant Design and Vue. 项目地址https://gitcode.com/gh_mirrors/an/ant-design-vue点击查看免费下载相关推荐ant-design-vue Calendar 日历组件完全指南API、事件与源码级实现解析ant design vue Calendar 日历组件完全指南API、事件与源码级实现解析 ant design vue 的 Calendar 是“按照日历前端UI组件设计系统Ant Design Vue Input 输入框组件完全指南API、事件与源码实现解析Ant Design Vue Input 输入框组件完全指南API、事件与源码实现解析 输入框Input是 Ant Design Vue 中最基础的表单域前端UI组件设计系统ant-design-vue Checkbox 多选框组件完全指南API、全选与源码实现解析ant design vue Checkbox 多选框组件完全指南API、全选与源码实现解析 ant design vue 的 Checkbox多选框组件前端UI组件设计系统上一篇突破语音合成极限Bark 2.0全方位升级深度解析与实战指南下一篇Visual Studio Code Remote - Containers 完全教程Docker开发环境一键配置创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考