Date PickerPro
Pro
Date pickers allow users to select dates from a calendar interface. They support date constraints, keyboard navigation, and confirm/cancel actions.
DatePicker Playground
DatePicker Playground
Preview
Code
Sept
2026
| MON | TUE | WED | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|---|
DateRangePicker Playground
DateRangePicker Playground
Preview
Code
Controls
Presets:
Installation
You can add the date picker component to your project manually:
1
Install the following dependencies:
npm
pnpm
yarn
bun
npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react @floating-ui/react @internationalized/date @react-aria/calendar @react-aria/focus @react-aria/i18n @react-aria/interactions @react-stately/calendar @react-aria/button2
Copy and paste the following code into your project.
Loading...
3
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Basic Usage
Single Date
import { useState } from 'react';
import { DatePicker } from '@versaui/ui/components/DatePicker';
import { today, getLocalTimeZone } from '@internationalized/date';
import type { DateValue } from '@internationalized/date';
function DatePickerExample() {
const [date, setDate] = useState<DateValue | null>(null);
return (
<DatePicker
value={date}
onChange={setDate}
/>
);
}Date Range
import { useState } from 'react';
import { DateRangePicker } from '@versaui/ui/components/DatePicker';
import type { RangeValue, DateValue } from '@internationalized/date';
function DateRangeExample() {
const [range, setRange] = useState<RangeValue<DateValue> | null>(null);
return (
<DateRangePicker
value={range}
onChange={setRange}
showPresets={true}
/>
);
}Keyboard Navigation
| Key | Action |
|---|---|
← → | Move to previous/next day |
↑ ↓ | Move to previous/next week |
Enter | Select the focused date |
Page Up/Down | Move to previous/next month |
Shift + Page Up/Down | Move to previous/next year |
DateRangePreset Interface
interface DateRangePreset {
id: string;
label: string;
getRange: (now: CalendarDate, locale: string) => RangeValue<CalendarDate>;
}
// Default presets: Today, This Week, This Month, This Year, Last Year, CustomAccessibility
- Full keyboard navigation for date selection
- Proper ARIA labels and roles for screen readers
- Focus management within the calendar grid
- Disabled dates are announced and not selectable
DatePicker Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | DateValue | null | — | Controlled selected date. |
defaultValue | DateValue | null | — | Default date for uncontrolled mode. |
onChange | (value: DateValue | null) => void | — | Callback when date changes. |
onApply | (value: DateValue | null) => void | — | Callback when Apply button clicked (confirm mode). |
onCancel | () => void | — | Callback when Cancel button clicked. |
minValue | DateValue | — | Minimum selectable date. |
maxValue | DateValue | — | Maximum selectable date. |
isDateUnavailable | (date: DateValue) => boolean | — | Function to mark specific dates unavailable. |
commitBehavior | 'instant' | 'onApply' | 'instant' | Whether to commit immediately or require Apply button. |
aria-label | string | 'Select date' | Accessible label for the calendar. |
className | string | '' | Additional CSS classes. |
DateRangePicker Props
| Prop | Type | Default | Description |
|---|---|---|---|
showPresets | boolean | true | Show preset date ranges (Today, This Week, etc.). |
presets | DateRangePreset[] | DEFAULT_PRESETS | Custom preset options. |
presetVariant | 'primary' | 'neutral' | 'neutral' | Container tabs variant for preset sidebar ('primary' | 'neutral'). |
presetStyle | 'simple' | 'expressive' | 'simple' | Container tabs visual style for preset sidebar ('simple' | 'expressive'). |
value | RangeValue<DateValue> | null | — | Controlled selected range. |
defaultValue | RangeValue<DateValue> | null | — | Default range for uncontrolled mode. |
onChange | (value: RangeValue<DateValue> | null) => void | — | Callback when range changes. |
onApply | (value: RangeValue<DateValue> | null) => void | — | Callback when Apply button clicked (confirm mode). |
onCancel | () => void | — | Callback when Cancel button clicked. |
minValue | DateValue | — | Minimum selectable date. |
maxValue | DateValue | — | Maximum selectable date. |
isDateUnavailable | (date: DateValue) => boolean | — | Function to mark specific dates unavailable. |
commitBehavior | 'instant' | 'onApply' | 'instant' | Whether to commit immediately or require Apply button. |
aria-label | string | 'Select date range' | Accessible label for the calendar. |
className | string | '' | Additional CSS classes. |