Date Range Picker

Overview

DateRangePicker pairs two segmented date inputs, a start and an end, with a trigger that opens a popover, committing to a single ordered NaviusDateRange value. Each endpoint is an embedded Date Input bound to one side of the shared range, reusing its whole segment editor; the range-selection grid itself is left to the styled layer, so this primitive owns the value, the endpoint inputs, the popover, and form submission. It can be controlled (@bind-Value / @bind-Open) or uncontrolled (DefaultValue / DefaultOpen).

Anatomy

@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>

Root

Owns the NaviusDateRange value and open state and cascades them, wrapping a Popover. Renders no DOM of its own. Value and Open are two-way bindable.

Prop	Type	Default	Description
Value	NaviusDateRange	Empty	Controlled value. Pair with ValueChanged (@bind-Value).
ValueChanged	EventCallback<NaviusDateRange>	-	Fires when the controlled Value should change.
DefaultValue	NaviusDateRange	Empty	Initial value when used uncontrolled.
Open	bool	false	Controlled open state. Pair with OpenChanged (@bind-Open).
OpenChanged	EventCallback<bool>	-	Fires when the controlled Open value should change.
DefaultOpen	bool	false	Initial open state when used uncontrolled.
MinValue	DateOnly?	-	Minimum accepted value for both endpoints.
MaxValue	DateOnly?	-	Maximum accepted value for both endpoints.
Granularity	string	"day"	Which units the endpoints edit: day, month, or year.
Disabled	bool	false	Disables both endpoints and the trigger.
ReadOnly	bool	false	Prevents value changes while keeping the endpoints focusable.
Required	bool	false	Marks the hidden bubble inputs required for native form validation.
Invalid	bool	false	Forces the control invalid regardless of native validity.
StartName	string?	-	Form field name for the start endpoint’s hidden bubble input.
EndName	string?	-	Form field name for the end endpoint’s hidden bubble input.
ChildContent	RenderFragment?	-	The Control and Content.

Control

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

Prop	Type	Default	Description
ChildContent	RenderFragment?	-	The Input, Separator, and Trigger parts.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered div.

Input

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

Prop	Type	Default	Description
Part	string	"start"	Which endpoint this input edits: "start" or "end".
Attributes	IDictionary<string, object>?	-	Forwarded to the underlying Date Input.

Separator

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

Prop	Type	Default	Description
ChildContent	RenderFragment?	-	Separator content.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered span.

Trigger

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

Prop	Type	Default	Description
ChildContent	RenderFragment?	-	Trigger content.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered button.

Content

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

Prop	Type	Default	Description
Side	string	"bottom"	Preferred side, forwarded to the Popover Positioner.
Align	string	"start"	Alignment along the side, forwarded to the Popover Positioner.
SideOffset	double	4	Distance in px from the trigger, forwarded to the Popover Positioner.
ChildContent	RenderFragment?	-	The range calendar.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered popup.

Data attributes

Part	Attribute	Description
Control	data-disabled	Present when disabled.
Control	data-readonly	Present when read-only.
Control	data-invalid	Present when invalid.
Control	data-required	Present when required.
Input	data-part	"start" | "end".
Trigger	data-popup-open	Present while the popup is open (from the Popover trigger).
Content	data-open	Present while open (from the Popover engine).
Content	data-closed	Present while closing, through the exit transition (from the Popover engine).
Content	data-starting-style	Present at the start of the open transition (from the Popover engine).
Content	data-ending-style	Present at the start of the close transition (from the Popover engine).

ARIA mechanism

The Control renders role="group" and aria-invalid when invalid. When nested under a Field with a mounted Label, the Control also wires aria-labelledby to the Field’s label id, since a role="group" div is not a target a native label’s for can reach. Each Input’s segments wire the spinbutton WAI-ARIA APG pattern (see Date Input). The Trigger delegates to the Popover trigger, so it carries aria-haspopup="dialog", aria-expanded, and aria-controls. The Content is the Popover popup, role="dialog". The Separator is aria-hidden. This mechanism is covered by the Playwright browser test suite and gated by axe-core in CI.