前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载UInputDate是 Nuxt UI本仓库ui项目内置的日期输入组件基于 Reka UI 的DateField/DateRangeField构建并通过internationalized/date提供基于 locale 的日期格式化能力。本文以官方文档 InputDate 文档 为骨架结合 组件源码、主题配置 与 测试用例完整讲解该组件的双向绑定、范围选择、外观变体、表单集成、日期限制以及用UCalendarUPopover组装完整日期选择器的全部实战方案。快速上手v-model 双向绑定UInputDate的核心用法是通过v-model指令控制选中日期。组件内部将值托管给 Reka UI 的DateField.Root因此在 Vue 模板中直接使用即可script setup langts import { CalendarDate } from internationalized/date const modelValue shallowRef(new CalendarDate(2022, 2, 3)) /script template UInputDate v-modelmodelValue / /template如果你不需要控制组件状态也可以使用default-valueprop 设置初始值script setup langts import { CalendarDate } from internationalized/date const defaultValue new CalendarDate(2022, 2, 6) /script template UInputDate :default-valuedefaultValue / /template从源码的类型定义可以看出这两个 prop 的类型是泛型的——当range为true时值的类型自动切换为日期范围对象见 InputDate.vuetype InputDateDefaultValueR extends boolean false R extends true ? DateRangeFieldRootProps[defaultValue] : DateFieldRootProps[defaultValue] type InputDateModelValueR extends boolean false (R extends true ? DateRangeFieldRootProps[modelValue] : DateFieldRootProps[modelValue]) | undefined关于日期值的类型UInputDate的modelValue并不是普通的Date对象而是internationalized/date包中的DateValue类型通常由CalendarDate类创建。该类型同时携带日历系统和时区信息是组件实现 locale 感知格式化的基础。在 测试用例 中可以确认这一点[with modelValue, { props: { modelValue: new CalendarDate(2025, 1, 1) } }], [with range and modelValue, { props: { range: true, modelValue: { start: new CalendarDate(2025, 1, 1), end: new CalendarDate(2025, 1, 15) } } }]本地化locale对日期格式的影响官方文档明确指出该组件使用internationalized/date包进行 locale 感知格式化日期格式由App组件的localeprop 决定。在 app.md 中同样有说明——locale同时控制 Calendar、InputDate、InputTime 等组件的日期/时间格式。在 Nuxt 项目中通过UApp传入 locale 即可全局生效script setup langts import { fr } from nuxt/ui/locale /script template UApp :localefr NuxtPage / /UApp /template每个 locale 都带有一个code属性如en、en-GB、fr该属性直接决定日期格式。详见 Nuxt i18n 集成文档 与 Vue i18n 集成文档。如果需要自定义语言可以使用defineLocale组合式函数创建专属 locale。范围选择range prop设置range为true即可让组件支持选择一段日期范围。此时v-model的值变为{ start: DateValue, end: DateValue }结构script setup langts import { CalendarDate } from internationalized/date const modelValue shallowRef({ start: new CalendarDate(2022, 2, 3), end: new CalendarDate(2022, 2, 20) }) /script template UInputDate v-modelmodelValue range / /template源码中组件会根据range的值在DateRangeField与DateField之间动态切换底层根组件见 InputDate.vueconst DateField computed(() props.range ? RangeDateField : SingleDateField)同时模板会根据segments是否为数组判断当前是单日期还是范围模式范围模式下会渲染起始段 分隔图标 结束段三段结构中间的分隔符由separatorIcon控制见 InputDate.vue。外观定制Color、Variant 与 SizeUInputDate的视觉样式与UInput保持一致通过color、variant、size三个 prop 控制。Color使用colorprop 改变组件颜色。默认值为primary源码InputDateProps中声明defaultValue primary见 InputDate.vueUInputDate colorneutral highlight /颜色集合来自全局主题配置options.theme.colors同时固定提供neutral选项见 input.ts。Variant使用variantprop 切换组件变体可用值与UInput一致包括outline默认、soft、subtle、ghost、noneUInputDate variantsubtle /主题配置中为每种 variant 定义了段segment的聚焦反馈样式见 input-date.ts例如outlinefocus:bg-elevatedsoftfocus:bg-accented/50 group-hover:focus:bg-accentedsubtlefocus:bg-accentedghostfocus:bg-elevated group-hover:focus:bg-accentedSize使用sizeprop 控制尺寸可选xs、sm、md默认、lg、xlUInputDate sizexl /主题中为每种尺寸分别配置了段间距与各段day/month/year的固定宽度见 input-date.ts例如md尺寸下day段宽w-9、month段宽w-9、year段宽w-11段间距为gap-0.5。此外UInputDate还支持两个 Input 系组件独有的外观 prophighlight像聚焦状态一样高亮环形ring颜色通常搭配color使用。fixed在所有断点上保持移动端文字大小默认情况下md断点以上文字会随尺寸放大见 input.ts。图标icon、leading 与 trailing使用iconprop 在 InputDate 内部显示一个 Icon 图标UInputDate iconi-lucide-calendar /官方文档补充说明使用leading和trailingprop 可以设置图标位置使用leading-icon和trailing-iconprop 可以为两个位置设置不同图标。这些能力由useComponentIcons组合式函数统一处理见 InputDate.vue底层复用 Input 系组件的图标机制。范围分隔图标separator-icon在range模式下起始日期与结束日期之间默认渲染一个i-lucide-minus图标作为分隔符。使用separator-iconprop 可以替换它UInputDate range separator-iconi-lucide-arrow-right /separatorIcon的默认值取自全局配置appConfig.ui.icons.minus见 InputDate.vue。这意味着你可以在全局层面统一定制这个分隔图标Nuxt在app.config.ts中通过ui.icons.minus键配置Vue在vite.config.ts中通过ui.icons.minus键配置。头像avatar propUInputDate支持在内部显示一个 Avatar适合表单字段 用户信息的组合场景UInputDate sizemd variantoutline :avatar{ src: https://github.com/vuejs.png, loading: lazy } /源码中当传入avatar时会优先渲染UAvatar而不是图标见 InputDate.vue头像尺寸由leadingAvatarSize槽位样式决定。禁用状态disabled设置disabledprop 即可禁用组件UInputDate disabled /禁用状态下段输入框不可编辑、不可聚焦主题通过data-disabled:cursor-not-allowed与data-disabled:opacity-75提供视觉反馈见 input-date.ts。该状态同样可以被外层UFormField或UFieldGroup向下传递useFormField/useFieldGroup的disabled计算逻辑见 InputDate.vue。实战示例限制、禁用与组合日期选择器标记不可用日期is-date-unavailable使用is-date-unavailableprop传入一个接收DateValue、返回布尔值的函数即可把特定日期标记为不可选。官方示例将每月 10 日到 16 日设为不可用完整示例见 InputDateUnavailableDatesExample.vuescript setup langts import type { DateValue } from internationalized/date import { CalendarDate } from internationalized/date const modelValue shallowRef({ start: new CalendarDate(2022, 1, 1), end: new CalendarDate(2022, 1, 9) }) const isDateUnavailable (date: DateValue) { return date.day 10 date.day 16 } /script template UInputDate v-modelmodelValue :is-date-unavailableisDateUnavailable range / /template该 prop 直接透传给 Reka UI 的DateFieldRootProps见 InputDate.vue会在用户选择时阻止不可用日期。限制最小/最大日期min-value / max-value使用min-value和max-valueprops 限制可选日期范围例如只允许 2023 年 9 月内的日期完整示例见 InputDateMinMaxDatesExample.vuescript setup langts import { CalendarDate } from internationalized/date const modelValue shallowRef(new CalendarDate(2023, 9, 10)) const minDate new CalendarDate(2023, 9, 1) const maxDate new CalendarDate(2023, 9, 30) /script template UInputDate v-modelmodelValue :min-valueminDate :max-valuemaxDate / /template测试用例中同样验证了minValue/maxValue与isDateUnavailable的渲染路径见 InputDate.spec.ts。组装完整的日期选择器Calendar PopoverUInputDate本身是分段segment输入框若要实现弹出式日历选择官方推荐用 Calendar Popover 组合完整示例见 InputDateDatePickerExample.vuescript setup langts import { CalendarDate } from internationalized/date const inputDate useTemplateRef(inputDate) const modelValue shallowRef(new CalendarDate(2022, 1, 10)) /script template UInputDate refinputDate v-modelmodelValue template #trailing UPopover :referenceinputDate?.inputsRef[3]?.$el UButton colorneutral variantlink sizesm iconi-lucide-calendar aria-labelSelect a date classpx-0 / template #content UCalendar v-modelmodelValue classp-2 / /template /UPopover /template /UInputDate /template关键点组件通过defineExpose暴露了inputsRef数组见 InputDate.vue里面按顺序存放各个日期段day/month/year 等的 DOM 实例因此可以用inputsRef[3]?.$el精确定位某个段作为UPopover的锚点。组装日期范围选择器将range与双月 Calendar 组合即可得到范围选择器完整示例见 InputDateDateRangePickerExample.vuescript setup langts import { CalendarDate } from internationalized/date const inputDate useTemplateRef(inputDate) const modelValue shallowRef({ start: new CalendarDate(2022, 1, 10), end: new CalendarDate(2022, 1, 20) }) /script template UInputDate refinputDate v-modelmodelValue range template #trailing UPopover :referenceinputDate?.inputsRef[0]?.$el UButton colorneutral variantlink sizesm iconi-lucide-calendar aria-labelSelect a date range classpx-0 / template #content UCalendar v-modelmodelValue classp-2 :number-of-months2 range / /template /UPopover /template /UInputDate /template范围模式下inputsRef[0]指向起始日期的第一个段将其作为 Popover 锚点即可让弹出层与输入框起始位置对齐。表单集成与 UFormField 协同校验UInputDate通过useFormField与useFieldGroup深度集成到表单体系见 InputDate.vue因此可以直接放进UFormField中使用UFormField namevalue UInputDate idinput v-modelstate.value / /UFormField测试用例验证了三个关键行为见 InputDate.spec.tsblur 时校验设置validateOn: [blur]后焦点离开整个输入框而非单个段才触发校验并显示错误信息段间焦点移动不触发 blur当焦点从年段移动到月段时不会误触发 blur 校验。组件源码中用relatedTarget判断焦点是否仍在组件内部见 InputDate.vue值更新后会通过emitFormChange/emitFormInput同步表单状态见 InputDate.vue。API 速查Props、Slots 与 EmitsPropsProp类型默认值说明modelValueDateValue/DateRange—受控的选中日期v-modeldefaultValueDateValue/DateRange—非受控的初始日期rangebooleanfalse是否选择日期范围colorprimary|neutral| 主题色primary组件颜色variantoutline|soft|subtle|ghost|noneoutline组件变体sizexs|sm|md|lg|xlmd组件尺寸highlightbooleanfalse高亮环形ring颜色fixedbooleanfalse所有断点保持移动端字号iconstring—内部图标默认leadingleading-icon/trailing-iconstring—指定位置的图标separator-iconstringui.icons.minus范围分隔图标avatarAvatarProps—内部头像disabledbooleanfalse禁用组件autofocusbooleanfalse挂载后自动聚焦第一个段autofocus-delaynumber0自动聚焦延迟毫秒min-value/max-valueDateValue—可选日期上下限is-date-unavailable(date: DateValue) boolean—标记不可用日期readonlybooleanfalse只读模式asstring|Componentdiv根元素渲染为指定元素uiPartialSlots—按槽位覆盖主题样式其余 prop如placeholder、locale、calendar等直接继承 Reka UIDateFieldRootProps/DateRangeFieldRootProps见 InputDate.vue。Slots插槽说明leading左侧内容区覆盖默认图标/头像default输入段区域的自定义内容trailing右侧内容区例如放置弹出日历按钮separator范围分隔符区域插槽类型定义见 InputDate.vue。Emits事件载荷说明update:modelValueDateValue/DateRange选中日期变化时触发changeEvent值提交变更时触发blurFocusEvent焦点离开整个输入框时触发focusFocusEvent焦点进入整个输入框时触发测试用例专门验证了update:modelValue在单日期与范围模式下的事件载荷见 InputDate.spec.ts以及focus/blur不会在段间切换时误触发见 InputDate.spec.ts。主题定制从源码理解样式结构UInputDate的主题定义在 src/theme/input-date.ts并通过 src/theme/index.ts 导出。它继承input主题的槽位与变体再叠加自身的段segment相关样式。主题暴露以下可覆盖的槽位slotroot外层容器base整体容器group relative inline-flex items-center rounded-md select-nonesegment单个日期段输入占位符data-placeholder:text-dimmed、字面量段data-[segmentliteral]:text-muted、校验失败data-invalid:text-error、禁用态等均由该槽位控制separatorIcon范围分隔图标默认size-4 text-muted值得注意的细节是主题中的replaceFocus函数会将focus:替换为has-focus:、focus-visible:替换为has-focus-visible:见 input-date.ts使段输入框的聚焦样式基于祖先容器的:has()状态生效——这保证了任意一个段聚焦时整个输入框都呈现聚焦外观。自定义方式与 Nuxt UI 其他组件一致通过uiprop 按槽位覆盖即可UInputDate :ui{ segment: text-sm } /或在 Nuxt 的app.config.ts中全局覆盖ui.inputDate键在 Vue 的vite.config.ts中全局覆盖对应主题键。无障碍与可测试性组件在每个日期段上渲染为带data-slotsegment与data-segment属性的可聚焦元素见 InputDate.vue支持键盘分段编辑与方向键导航由 Reka UI 提供。测试套件在range模式下执行了vitest-axe无障碍断言并确认无违规见 InputDate.spec.ts。组件的段编辑模型非常适合键盘输入——用户可以直接键入年、月、日数字配合方向键调整数值这也正是UInputDate区别于纯弹出式UCalendar的核心价值它把快速键盘录入与可视化选择两种交互统一在了同一个受控值上。赞分享前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载相关推荐antd-mobile CalendarPicker 日历选择器完全指南日期与日期范围选择实战antd mobile CalendarPicker 日历选择器完全指南日期与日期范围选择实战 CalendarPicker 是 antd mobile本项UI组件前端移动开发Animated高级技巧实现复杂动画序列与交互响应Animated高级技巧实现复杂动画序列与交互响应 Animated是React和React Native生态中强大的声明式动画库它让开发者能够轻松创建流畅vue-pure-admin日期选择器DatePicker日期范围选择vue pure admin日期选择器DatePicker日期范围选择 还在为后台管理系统中复杂的日期范围筛选而头疼吗vue pure admin基于Ele前端企业应用上一篇OpenMed HIPAA 合规检查清单实战指南逐项对照 45 CFR Part 164 安全与隐私规则下一篇nRF Connect 示例中的 Matter CLIZephyr Shell 命令完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考