- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
A flexible date picker component built on react-day-picker with popover integration. Supports single date selection, date ranges, time inputs, and natural language parsing.
Basic Usage
A simple date picker with popover and calendar view.
Date Range Selection
Select a range of dates with start and end dates. The calendar displays two months side-by-side for easier range selection.
With Input Field
Integrate date picker with an input field for manual entry. Users can type dates directly or use the calendar button to open the picker.
With Time Selection
Combine date selection with time input for complete datetime picking.
Natural Language Input
Parse natural language date strings like "tomorrow", "next Friday", or "in 2 weeks". Requires the chrono-node package.
Your post will be published on August 23, 2026.
With Validation
Show validation errors for invalid date selections, such as dates in the past.
Disabled Dates
Prevent selection of specific dates, such as weekends, holidays, or dates outside a valid range.
Weekends are disabled
API Reference
Calendar Props
The Calendar component is built on react-day-picker. Key props include:
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "multiple" | "range" | - | Selection mode for the calendar |
selected | Date | DateRange | Date[] | - | Currently selected date(s) |
onSelect | (date) => void | - | Callback when date is selected |
disabled | Date | Date[] | (date: Date) => boolean | - | Disable specific dates or date ranges |
initialFocus | boolean | false | Auto-focus calendar on mount |
numberOfMonths | number | 1 | Number of months to display |
defaultMonth | Date | - | Initially displayed month |
captionLayout | "dropdown" | "buttons" | "buttons" | Layout for month/year navigation |
month | Date | - | The month to display (controlled) |
onMonthChange | (month: Date) => void | - | Callback when month changes |
Date Formatting
The examples use date-fns for formatting. Common format strings:
| Format | Output | Description |
|---|---|---|
"PPP" | Apr 29, 2023 | Long format with full month name |
"PP" | Apr 29, 2023 | Medium format |
"P" | 04/29/2023 | Short numeric format |
"LLL dd, y" | Apr 29, 2023 | Custom format with abbreviated month |
"yyyy-MM-dd" | 2023-04-29 | ISO format |
See date-fns documentation for all available format options.
Natural Language Parsing
Using chrono-node, you can parse natural language date inputs:
| Input | Parsed Result |
|---|---|
"tomorrow" | Next day |
"next Friday" | Upcoming Friday |
"in 2 weeks" | 14 days from now |
"3 days ago" | 3 days in the past |
"last Monday" | Previous Monday |
"Jan 15" | January 15 of current year |