Date Time Range Picker
A collection of date and time picker components for selecting dates, times, and ranges.
Installation
Install dependencies and import the Date Time Range Picker components.
1. Install dependencies
npm install date-fns@3.6.0 react-day-picker@9.4.32. Import component
import { DateTimeRangePicker } from "@/components/date-time-range-picker/date-time-range-picker"Note: These specific versions are required to ensure UI compatibility.
Features
Key features of the date time range picker components.
- Light and dark mode support
- Keyboard navigation
- Date range selection
- Time selection
- Preset date ranges
- Comparison mode
- Fully customizable
- Accessible
Components
Calendar
A calendar component for selecting dates.
March 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| 23 | 24 | 25 | 26 | 27 | 28 | 1 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | 1 | 2 | 3 | 4 | 5 |
DateInput
A component for inputting dates with separate fields.
//
TimeInput
A component for inputting time with hours, minutes, and AM/PM.
:
DateTimeInput
A component that combines date and time input.
//
:
DateRangePicker
A component for selecting a range of dates with presets.
DateTimeRangePicker
A component for selecting a range of dates and times.
Examples
Basic Date Range Picker
A simple date range picker with default settings.
Date Range Picker with Comparison
A date range picker with comparison mode enabled.
Basic Date Time Range Picker
A date time range picker for selecting dates and times.