Date Range Picker

<NaviusDateRangePicker @bind-Value="_range">
    <NaviusDateRangePickerControl class="inline-flex items-center gap-2 rounded-md border px-3 py-2">
        <NaviusDateRangePickerInput Part="start" />
        <NaviusDateRangePickerSeparator>to</NaviusDateRangePickerSeparator>
        <NaviusDateRangePickerInput Part="end" />
        <NaviusDateRangePickerTrigger aria-label="Open calendar"><CalendarIcon /></NaviusDateRangePickerTrigger>
    </NaviusDateRangePickerControl>
    <NaviusDateRangePickerContent class="z-50 rounded-md border bg-popover p-4 shadow-md">
        @* a range-mode calendar from the styled layer *@
    </NaviusDateRangePickerContent>
</NaviusDateRangePicker>

@code { private NaviusDateRange _range = NaviusDateRange.Empty; }

Features

• The endpoints are embedded Date Inputs bound to the start / end side of the shared range, reusing the whole segment brain.
• The value is a NaviusDateRange (a nullable Start and End), so a range can be partially entered; both endpoints submit ISO under StartName / EndName.
• The trigger opens a Popover; the range calendar grid itself is delegated to the styled layer (a range-mode calendar), so the brain owns the value, inputs, popover and form submission, not a second calendar engine.
• Controlled via @bind-Value / @bind-Open, uncontrolled via DefaultValue / DefaultOpen.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add date-range-picker

Anatomy

Import the parts and assemble them. The root renders no DOM of its own; it cascades state through the wrapped popover.

@using Navius.Primitives.Components.DateRangePicker
@using Navius.Primitives.Common

<NaviusDateRangePicker>
    <NaviusDateRangePickerControl>
        <NaviusDateRangePickerInput Part="start" />
        <NaviusDateRangePickerSeparator />
        <NaviusDateRangePickerInput Part="end" />
        <NaviusDateRangePickerTrigger />
    </NaviusDateRangePickerControl>
    <NaviusDateRangePickerContent>
        @* range calendar *@
    </NaviusDateRangePickerContent>
</NaviusDateRangePicker>

API Reference

Root

NaviusDateRangePicker. Owns the NaviusDateRange value and open state and cascades them. Renders no DOM (wraps a Popover). Value and Open are two-way bindable.

Control

NaviusDateRangePickerControl. The labelled group wrapping the endpoints, separator and trigger; hosts the two hidden bubble inputs. Renders a div with role=group.

Data attributes

Input

NaviusDateRangePickerInput. One endpoint: an embedded Date Input bound to the start or end side (Part). Renders the Date Input group.

Data attributes

Separator

NaviusDateRangePickerSeparator. The visual 'to' between the endpoints, hidden from assistive tech. Renders an aria-hidden span.

Trigger

NaviusDateRangePickerTrigger. The calendar button that opens the popup. Delegates to the Popover trigger. Renders a button.

Data attributes

Content

NaviusDateRangePickerContent. Portals and anchors the popup (Popover Portal > Positioner > Popup) and hosts the range calendar. The Popup is role=dialog. Renders the popover popup.

Data attributes

Accessibility

The control is a role="group" carrying aria-invalid; each endpoint keeps its spinbutton segments (see Date Input). The trigger carries aria-haspopup="dialog" + aria-expanded; the popup is role="dialog". The separator is aria-hidden.