DatePicker 日期选择器

基于 BrConfigProvider 实现全局主题配置，复用 BrCalendar 核心能力，支持多粒度选择、快捷选择的企业级日期选择器，可无缝集成 BrFormItem。

特性

• 多模式选择：支持单日选择、日期范围选择以及包含时间的选择。
• 灵活的快捷键：内置并支持自定义丰富的快捷选择项（如“今天”、“近7天”、“本季度”等）。
• 无缝表单集成：原生对接表单校验体系，自动响应 success、error、warning 等校验状态。
• 高度可定制：基于原子化 CSS 和 BrConfigProvider，可轻松实现全局或局部的主题风格定制。

基础日期选择

最基本的日期选择器，支持清空和禁用特定日期。

Example

范围选择

带有左侧快捷选择栏的日期范围选择，适用于报表等时间跨度筛选场景。

Example

日期时间选择

附带时分秒选择面板的日期选择器。

Example

自定义快捷操作

支持自定义快捷操作，无论是单日选择还是范围选择，都可以通过传入 shortcuts 属性来实现复杂的快捷选择逻辑（如：下周一、本季度等）。

Example

校验状态

无缝接入表单体系，可以独立配置 validation-state 属性展示成功、错误或警告状态。

Example

主题定制

通过 BrConfigProvider 全局配置或 Tailwind/UnoCSS 原子化类名控制局部外观，实现深度定制。

Use BrConfigProvider Override theme color and border radius

Use Tailwind/UnoCSS Class name local override

Example

API 说明

BrDatePicker (Root)

属性	类型	默认值	说明
modelValue	Date | [Date, Date] | Date[]	-	绑定的日期值
mode	'single' | 'range' | 'multiple'	'single'	日期选择模式
granularity	'day' | 'week' | 'month' | 'year'	'day'	日期颗粒度
disabled	boolean	false	是否全量禁用
validationState	'default'|'success'|'error'|'warning'	'default'	强制校验状态（通常由 FormItem 自动下发）
shortcuts	Shortcut[]	[]	快捷选择配置
showTime	boolean	false	是否显示时间选择面板

注：BrDatePickerInput、BrDatePickerPopover、BrDatePickerCalendar、BrDatePickerShortcuts 共享 Root 上下文，直接按需拼装即可，无需单独传参。