DateRangePicker

Use DateRangePicker

DateRangePicker is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, DateRangePicker } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <DateRangePicker label="Travel dates" startName="start" endName="end" today="2026-10-26" defaultValue={{start:"2026-10-12",end:"2026-10-18"}} />
    </FloodRoot>
  );
}

Design notes

• Composes DateRangeField, RangeCalendar and the existing Popover engine. One popup selects start and end; it closes after an enabled complete interval.
• The popup follows the whole fields region width and clamps to the viewport. Text and calendar editing share the same partial/complete range contract.
• Controlled range/open state and availability remain host-owned. Escape/outside dismissal does not turn an incomplete range into a valid submission.
• Translate endpoint, calendar and range instruction labels. Introduced in 0.2.7.

API reference