DatePicker

Based on BrConfigProvider to implement global theme configuration, reuse BrCalendar core capabilities, support multi-granularity selection, quick selection enterprise-level date picker, and seamlessly integrate BrFormItem.

Features

• Multi-mode Selection: Supports single date selection, date range selection, and date-time selection.
• Flexible Shortcuts: Built-in and customizable rich quick selection options (e.g., "Today", "Last 7 Days", "This Quarter").
• Seamless Form Integration: Natively connects with the form validation system, automatically responding to validation states like success, error, and warning.
• Highly Customizable: Based on atomic CSS and BrConfigProvider, easily achieving global or local theme style customization.

Basic Date Picker

The most basic date picker, supports clearing and disabling specific dates.

Example

Date Range Selection

Date range selection with left shortcuts panel, suitable for scenarios like report time span filtering.

Example

Date Time Selection

Date picker with time selection panel.

Example

Custom Shortcuts

Supports custom quick actions. Whether it's single date selection or range selection, you can pass the shortcuts property to implement complex quick selection logic (such as: next Monday, this quarter, etc.).

Example

Validation States

Seamlessly integrates with the form system, can independently configure the validation-state property to display success, error, or warning states.

Example

Theme Customization

Control local appearance through BrConfigProvider global configuration or Tailwind/UnoCSS atomic class names to achieve deep customization.

Use BrConfigProvider Override theme color and border radius

Use Tailwind/UnoCSS Class name local override

Example

API

BrDatePicker (Root)

Property	Type	Default	Description
modelValue	Date | [Date, Date] | Date[]	-	Bound date value
mode	'single' | 'range' | 'multiple'	'single'	Date selection mode
granularity	'day' | 'week' | 'month' | 'year'	'day'	Date granularity
disabled	boolean	false	Whether to disable entirely
validationState	'default'|'success'|'error'|'warning'	'default'	Forced validation state (usually auto-injected by FormItem)
shortcuts	Shortcut[]	[]	Shortcuts configuration
showTime	boolean	false	Whether to show the time selection panel

Note: BrDatePickerInput, BrDatePickerPopover, BrDatePickerCalendar, BrDatePickerShortcuts share the Root context, they can be assembled on demand without passing parameters individually.