Vibe UI
Initializing Vibe UI System...
Vibe UI

Date Picker

Date selection component combining popover panels, interactive calendars, and formatted date displays.

Date Picker

Date selection component combining popover panels, interactive calendars, and formatted date displays.

Installation

pnpm dlx vibe-ui-kit@latest add date-picker popover calendar button
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: popover, calendar, button

Themes

Explore all style variants side-by-side.

Date Range Picker

Select a date interval with multiple month grid viewports.

Props

DatePicker

PropTypeDefaultDescription
dateDate-The currently selected date value.
onDateChange(date?: Date) => void-Callback function fired when a new date is selected.
placeholderstring'Pick a date'Trigger button label text when no date has been selected.
variant'default' | 'glass' | 'retro' | 'glow''default'The design variant styles applied to the trigger and calendar panel.

DateRangePicker

PropTypeDefaultDescription
dateDateRange-The selected date interval range { from: Date; to?: Date }.
onDateChange(date?: DateRange) => void-Callback function fired when the date range selection changes.
placeholderstring'Pick a date range'Trigger button label text when no range has been selected.
variant'default' | 'glass' | 'retro' | 'glow''default'The design variant styles applied to the trigger and calendar panels.
numberOfMonthsnumber2The number of concurrent calendar month grids to display side-by-side.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Date Picker | Vibe UI