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.

Component Features

📅 Multiple Selection Modes: Supports single date, range selection, and range with time selection.
⚡ Flexible Shortcuts: Built-in and customizable shortcut options (e.g., Today, Last 7 Days, This Quarter).
📝 Seamless Form Integration: Integrates with form validation system, automatically responding to success, error, warning states.
🎨 Highly Customizable: Based on atomic CSS and BrConfigProvider for easy global or local theme customization.

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.

<script setup lang="ts">
import { ref } from 'vue'
import { 
  BrDatePicker, 
  BrDatePickerInput, 
  BrDatePickerPopover, 
  BrDatePickerCalendar, 
  BrDatePickerShortcuts 
} from '@breezeui/vue'

const date = ref<Date>()

const shortcuts = [
  { label: 'Today', value: () => new Date() },
  { label: 'Yesterday', value: () => {
      const d = new Date()
      d.setDate(d.getDate() - 1)
      return d
  }}
]
</script>

<template>
  <div class="flex flex-col gap-4 items-center">
    <div class="w-full max-w-sm">
      <BrDatePicker v-model="date" :shortcuts="shortcuts" placeholder="Please enter date">
        <BrDatePickerInput />
        <BrDatePickerPopover>
          <template #shortcuts>
            <BrDatePickerShortcuts />
          </template>
          <BrDatePickerCalendar />
        </BrDatePickerPopover>
      </BrDatePicker>
    </div>
  </div>
</template>

Date Range Selection

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

<script setup lang="ts">
import { ref } from 'vue'
import { 
  BrDatePicker, 
  BrDatePickerInput, 
  BrDatePickerPopover, 
  BrDatePickerCalendar, 
  BrDatePickerShortcuts 
} from '@breezeui/vue'

const range = ref<[Date, Date]>()

const shortcuts = [
  { label: 'Last 7 days', value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end] as [Date, Date]
  }},
  { label: 'Last month', value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end] as [Date, Date]
  }}
]
</script>

<template>
  <div class="flex flex-col gap-4 items-center">
    <div class="w-full max-w-sm">
      <BrDatePicker v-model="range" mode="range" :shortcuts="shortcuts" placeholder="Start - End">
        <BrDatePickerInput />
        <BrDatePickerPopover>
          <template #shortcuts>
            <BrDatePickerShortcuts />
          </template>
          <BrDatePickerCalendar />
        </BrDatePickerPopover>
      </BrDatePicker>
    </div>
  </div>
</template>

Date Time Selection

Date picker with time selection panel.

<script setup lang="ts">
import { ref } from 'vue'
import { 
  BrDatePicker, 
  BrDatePickerInput, 
  BrDatePickerPopover, 
  BrDatePickerCalendar, 
  BrDatePickerTime 
} from '@breezeui/vue'

const datetime = ref<Date>()
</script>

<template>
  <div class="flex flex-col gap-4 items-center">
    <div class="w-full max-w-sm">
      <BrDatePicker v-model="datetime" show-time placeholder="Select date and time">
        <BrDatePickerInput />
        <BrDatePickerPopover>
          <BrDatePickerCalendar />
          <template #time>
            <BrDatePickerTime />
          </template>
        </BrDatePickerPopover>
      </BrDatePicker>
    </div>
  </div>
</template>

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.).

<script setup lang="ts">
import { ref } from 'vue'
import { 
  BrDatePicker, 
  BrDatePickerInput, 
  BrDatePickerPopover, 
  BrDatePickerCalendar, 
  BrDatePickerShortcuts 
} from '@breezeui/vue'

const customSingleDate = ref<Date>()
const customRangeDate = ref<[Date, Date]>()

const customSingleShortcuts = [
  { label: 'Next Monday', value: () => {
      const d = new Date()
      // Calculate the date of next Monday
      d.setDate(d.getDate() + ((1 + 7 - d.getDay()) % 7 || 7))
      return d
  }},
  { label: 'End of this month', value: () => {
      const d = new Date()
      // The0day of next month is the last day of this month
      return new Date(d.getFullYear(), d.getMonth() + 1, 0)
  }}
]

const customRangeShortcuts = [
  { label: 'This quarter', value: () => {
      const d = new Date()
      const quarter = Math.floor(d.getMonth() / 3)
      const start = new Date(d.getFullYear(), quarter * 3, 1)
      const end = new Date(d.getFullYear(), quarter * 3 + 3, 0)
      return [start, end] as [Date, Date]
  }},
  { label: 'Past 90 days', value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 90)
      return [start, end] as [Date, Date]
  }}
]
</script>

<template>
  <div class="flex flex-col gap-4 items-center">
    <div class="w-full max-w-sm flex flex-col gap-4">
      <BrDatePicker v-model="customSingleDate" :shortcuts="customSingleShortcuts" placeholder="Select specific date">
        <BrDatePickerInput />
        <BrDatePickerPopover>
          <template #shortcuts>
            <BrDatePickerShortcuts />
          </template>
          <BrDatePickerCalendar />
        </BrDatePickerPopover>
      </BrDatePicker>

      <BrDatePicker v-model="customRangeDate" mode="range" :shortcuts="customRangeShortcuts" placeholder="Select specific range">
        <BrDatePickerInput />
        <BrDatePickerPopover>
          <template #shortcuts>
            <BrDatePickerShortcuts />
          </template>
          <BrDatePickerCalendar />
        </BrDatePickerPopover>
      </BrDatePicker>
    </div>
  </div>
</template>

Validation States

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

<script setup lang="ts">
import { ref } from 'vue'
import { 
  BrDatePicker, 
  BrDatePickerInput, 
  BrDatePickerPopover, 
  BrDatePickerCalendar 
} from '@breezeui/vue'

const date = ref<Date>()
</script>

<template>
  <div class="flex flex-col gap-4 items-center">
    <div class="w-full max-w-sm flex flex-col gap-4">
      <BrDatePicker v-model="date" validation-state="error" placeholder="Error state">
        <BrDatePickerInput />
        <BrDatePickerPopover>
          <BrDatePickerCalendar />
        </BrDatePickerPopover>
      </BrDatePicker>

      <BrDatePicker v-model="date" validation-state="success" placeholder="Success state">
        <BrDatePickerInput />
        <BrDatePickerPopover>
          <BrDatePickerCalendar />
        </BrDatePickerPopover>
      </BrDatePicker>
    </div>
  </div>
</template>

Theme Customization

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

<script setup lang="ts">
import { ref } from 'vue'
import { 
  BrConfigProvider,
  BrDatePicker, 
  BrDatePickerInput, 
  BrDatePickerPopover, 
  BrDatePickerCalendar 
} from '@breezeui/vue'

const date1 = ref<Date>()
const date2 = ref<Date>()
</script>

<template>
  <div class="flex flex-col gap-8 items-center">
    <!-- Global config override -->
    <div class="w-full max-w-sm space-y-2">
      <label class="text-sm font-medium">Use BrConfigProvider Override theme color and border radius</label>
      <BrConfigProvider :theme="{ radius: '1rem', primary: '#10b981' }">
        <BrDatePicker v-model="date1" placeholder="Larger border radius，Main color becomes green">
          <BrDatePickerInput />
          <BrDatePickerPopover>
            <BrDatePickerCalendar />
          </BrDatePickerPopover>
        </BrDatePicker>
      </BrConfigProvider>
    </div>

    <!-- Local class name override -->
    <div class="w-full max-w-sm space-y-2">
      <label class="text-sm font-medium">Use Tailwind/UnoCSS Class name local override</label>
      <BrDatePicker v-model="date2" placeholder="Custom Style">
        <BrDatePickerInput class="border-indigo-500 bg-indigo-50/50" />
        <!-- Override popover shadow and background -->
        <BrDatePickerPopover class="shadow-2xl bg-slate-50">
          <BrDatePickerCalendar />
        </BrDatePickerPopover>
      </BrDatePicker>
    </div>
  </div>
</template>

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.

#DatePicker

#Component Features

#Features

#Basic Date Picker

#Date Range Selection

#Date Time Selection

#Custom Shortcuts

#Validation States

#Theme Customization

#API

#BrDatePicker (Root)