- Docs
- components
- DateRangePicker
DateRangePicker
A DateRangePicker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date range.
A date range picker can be built using two separate <input type="date"> elements, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. DateRangePicker helps achieve accessible and international date and time range pickers that can be styled as needed.
Installation
npx shadcn@latest add https://backchanel.com/default/date-pickerComposed Components
A DateRangePicker uses the following components, which may also be used standalone or reused in other components.
Label
A label provides context for an element.
DateField
A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.
Button
A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
Popover
A popover is an overlay element positioned relative to a trigger.
Dialog
A dialog is an overlay shown above other content in an application.
RangeCalendar
A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
Reusable Wrapper - Example
If you will use a DateRangePicker in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.
The installed file includes a reusable wrapper JollyDateRangePicker. This wrapper serves as an excellent starting point for use throughout your codebase.
Component daterangepicker-reusable not found in registry.
The JollyDateRangePicker component extends the props of React Aria DateRangePicker and adds:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | undefined | Label for the date range picker |
description | string | undefined | undefined | Description text for the date range picker |
errorMessage | string | ((validation: AriaValidationResult) => string) | undefined | undefined | Error message to display or function to generate it |
You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.