Date Picker
A date picker component that combines an input field with a calendar popover. Supports single date, multiple dates, and date range selection with various display variants including popover, dialog, and inline modes.
Installation
Import
Usage
The DatePicker component is perfect for forms requiring date input, booking systems, scheduling interfaces, and any application where users need to select dates. Use the popover variant for most cases, dialog variant for mobile or when you want a modal experience, and inline variant when you want the calendar always visible. The component integrates seamlessly with forms and supports all calendar features including date ranges, multiple selection, and time picking. For form integration with validation and error handling, use DateField which extends DatePicker and integrates with Conform forms. DateField automatically displays validation errors from form schemas and provides label, topText, and other form-specific props for enhanced form UX.
Design Guidelines
The date picker uses a clean input field that opens a calendar popover on focus or click. The input displays the selected date in a formatted string. The popover variant is responsive and positions itself relative to the input. The dialog variant provides a centered modal experience ideal for mobile devices. Ensure adequate spacing around the component, especially when using multiple months or the inline variant.
Basic Usage
Simple date picker with popover variant
Dialog Variant
Date picker that opens in a dialog modal
Inline Variant
Date picker displayed inline without a popover
Date Range Selection
Select a range of dates
With Time Picker
Date picker with integrated time selection
Clearable
Date picker with a clear button to reset selection
Input Sizes
Different input sizes for the date picker
With Date Constraints
Date picker with minimum and maximum date restrictions
Form Integration - Event Planning
DateField with form integration, labels, and validation
Form Integration - Booking with Date Range
Hotel booking form with check-in and check-out dates
Form Integration - Multiple Date Selection
Project planning form with multiple milestone dates
DateField
DateField extends DatePicker with form integration, labels, error handling, and validation support. Use DateField when building forms with Conform. extends DatePicker. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
field | FieldMetadata | — | Conform field metadata for form integration and validation |
label | string | React.ReactNode | — | Label text displayed above the date picker field |
topText | string | React.ReactNode | — | Helper text displayed above the label |
labelProps | React.LabelHTMLAttributes<HTMLLabelElement> | — | Additional props for the label element |
inputClass | string | — | Additional CSS classes for the input element |
wrapperClassName | string | — | Additional CSS classes for the wrapper element |
inputRef | React.Ref<HTMLDivElement> | — | Ref forwarded to the date picker container |
className | string | — | Additional CSS classes to apply to the component |
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
value | Date | Date[] | { from: Date; to?: Date } | undefined | undefined | The selected date(s) or date range |
onValueChange | (value: Date | Date[] | { from: Date; to?: Date } | undefined) => void | - | Callback fired when the selected date(s) change |
defaultValue | Date | Date[] | { from: Date; to?: Date } | undefined | undefined | The default selected date(s) or date range |
variant | "popover" | "dialog" | "inline" | "popover" | Display variant: popover (default), dialog modal, or inline |
mode | "single" | "multiple" | "range" | "single" | Selection mode: single date, multiple dates, or date range |
placeholder | string | "Select date" | Placeholder text for the input field |
clearable | boolean | false | Whether to show a clear button to reset the selection |
inputSize | "sm" | "md" | "lg" | "xl" | "md" | Size of the input field |
numberOfMonths | number | 1 | Number of months to display in the calendar |
showTimePicker | boolean | false | Whether to show an integrated time picker |
showTodayButton | boolean | false | Whether to show a button to jump to today |
disabled | Date[] | ((date: Date) => boolean) | boolean | false | Dates to disable or a function to determine if a date should be disabled |
minDate | Date | undefined | undefined | Minimum selectable date |
maxDate | Date | undefined | undefined | Maximum selectable date |
locale | string | "en-US" | Locale for date formatting and display |
weekStartsOn | 0 | 1 | 0 | Day of the week to start the calendar (0 = Sunday, 1 = Monday) |
className | string | — | Additional CSS classes to apply to the component |