Start and end date selection with linked calendar popovers.
DateRangePicker pairs two DatePicker controls for reporting ranges, audit filters, and planning windows.
The end input uses the start date as its minimum when available.
<DateRangePicker defaultValue={{ from: "2026-05-01", to: "2026-05-07" }} />import { DateRangePicker } from "@froggdesign/enter-ui-react";Use min and max to disable dates outside the allowed range.
DateRangePicker uses two labelled button triggers, Start date and End date, with calendar popovers. DatePicker owns keyboard navigation and focus handling. These are not native date inputs; validate the completed range in application code. Wrap the range in Field or add surrounding copy when its purpose needs more context.
value, defaultValue, and onValueChange use { from?: string; to?: string }.min and max disable out-of-range calendar dates. Selecting a start date sets the end picker’s minimum; selecting an end date sets the start picker’s maximum.disabled and invalid map to aria state and data attributes.className.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.