Date Range Picker

Overview

DateRangePicker renders NaviusDateRangePicker, the headless primitive that owns the NaviusDateRange value and popover open state, and composes a bordered group of start/separator/end segmented inputs plus a calendar trigger. The trigger opens a popup holding the existing ZitsCalendar in range mode (two months by default) and an optional preset rail. The wrapper is the single source of truth feeding both the segmented inputs and the calendar; it owns value and open state so @bind-Value / @bind-Open (controlled) and DefaultValue / DefaultOpen (uncontrolled) both work. Completing a range, in the calendar or via a preset, closes the popup.

Install

navius add date-range-picker --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components
@using Navius.Primitives.Common

<ZitsDateRangePicker @bind-Value="_range" NumberOfMonths="2" />

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

Parts and props

MinValue, MaxValue, Granularity, Disabled, ReadOnly, Required, Invalid, StartName, and EndName pass through to NaviusDateRangePicker unchanged. The styled wrapper adds:

Prop	Type	Default	Description
`Value`	`NaviusDateRange`	`NaviusDateRange.Empty`	Controlled range. Bind with `@bind-Value`; forwarded only when set.
`DefaultValue`	`NaviusDateRange`	`NaviusDateRange.Empty`	Uncontrolled initial range.
`Open`	`bool`	`false`	Controlled popup open state. Bind with `@bind-Open`.
`DefaultOpen`	`bool`	`false`	Uncontrolled initial open state.
`NumberOfMonths`	`int`	`2`	Months shown side by side in the popover calendar.
`FirstDayOfWeek`	`DayOfWeek`	`Sunday`	First weekday column in the calendar.
`IsDateUnavailable`	`Func<DateOnly, bool>?`	`null`	Predicate marking dates unavailable, mapped to the calendar’s `DisabledMatcher`.
`Presets`	`IReadOnlyList<ZitsDateRangePreset>?`	`null`	Optional quick-pick rail rendered beside the calendar.
`Separator`	`string`	`"–"`	The glyph between the start and end segmented inputs.

Styling surface

Attributes on ZitsDateRangePicker is merged onto NaviusDateRangePickerControl (the field row) via Cn.Merge, with the caller’s classes applied last. The trigger, popup, and preset button classes are internal to the composition and not independently overridable per-instance.

Parameter	Values
`Granularity`	`day` (default), see the primitive manifest for the full set

Data attribute hooks

Part	Attribute	Description
Field row	`data-disabled`	Present when `Disabled` is true, emitted by `NaviusDateRangePickerControl`.
Field row	`data-invalid`	Present when `Invalid` is true, emitted by `NaviusDateRangePickerControl`.
Popup	`data-open` / `data-closed`	Animation-in/out state, emitted by `NaviusDateRangePickerContent`.
Popup	`data-side`	The resolved popover side, emitted by `NaviusDateRangePickerContent`.
Segment	`data-placeholder`	Present on an empty segment, emitted by `NaviusDateRangePickerInput`.

Underlying primitives

NaviusDateRangePicker