shadcn/phlexcomponents

Date Range Picker

A date range selection component with calendar popup and optional text input, powered by vanilla-calendar-pro.

Requires JS

This component requires the date_range_picker stimulus controller.

API Reference

DateRangePicker

Name	Type	Default
`name:`	`array`	`nil`
Array of two strings for form field names: `[start_date_name, end_date_name]`. Used to identify the selected date range values when forms are submitted.
`id:`	`string`	`nil`
HTML ID for the input element. When `select_only` is true, the ID is applied to the button trigger instead of text inputs.
`value:`	`array`	`nil`
Array of two date values: `[start_date, end_date]`. Accepts DateTime objects or ISO date strings. Automatically converts to UTC for consistent handling.
`format:`	`string`	`"DD/MM/YYYY"`
Display format for the selected dates. Uses dayjs format tokens for customization.
`select_only:`	`boolean`	`false`
When true, disables text input and only allows date selection via calendar popup. Useful for preventing manual date entry.
`placeholder:`	`string`	`nil`
Placeholder text displayed in the input field when no date range is selected. Provides guidance about expected date range format.
`disabled:`	`boolean`	`false`
Whether the date range picker is disabled and non-interactive. When true, prevents user interaction and form submission.
`options:`	`hash`	`{}`
Configuration options passed to vanilla-calendar-pro. Allows customization of calendar behavior, range selection, and date constraints.
`mask:`	`boolean`	`true`
Whether to apply input masking to the text field for guided date entry. Helps users enter date ranges in the correct format automatically.
`attributes`	`keyword arguments`

Keyboard Interactions

Key	Description
Space	Opens/closes the popover when focus is on calendar button.
Enter	Opens/closes the popover when focus is on calendar button.
Tab	Moves focus to the next focusable element.
Shift+Tab	Moves focus to the previous focusable element.
Esc	Closes the popver.

Examples

On This Page

Keyboard Interactions
Examples