Date Input

Overview

DateInput renders NaviusDateInput, the headless primitive that owns the segment spinbuttons and value parsing, styled as a bordered focus-within row. It owns value state so both @bind-Value (controlled) and DefaultValue (uncontrolled) work through the wrapper (only ever handing the primitive a correct current value), the same discipline ZitsCalendar uses.

Install

navius add date-input --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsDateInput @bind-Value="_date" />

@code {
    private DateOnly? _date = new(2026, 7, 4);
}

Parts and props

DateInput is a single control with no part tree. Granularity, MinValue, MaxValue, PlaceholderValue, Disabled, ReadOnly, Required, Invalid, ForceLeadingZeros, Culture, Dir, and Name pass through to NaviusDateInput unchanged. The styled wrapper adds:

Prop	Type	Default	Description
Value / ValueChanged	DateOnly?	null	Controlled value. Bind with @bind-Value.
DefaultValue	DateOnly?	null	Uncontrolled initial value; works through the wrapper (not just the primitive).
ChildContent	RenderFragment?	null	Overrides the default trailing calendar glyph.

Styling surface

Attributes on ZitsDateInput merges with the field-row base class (border, focus ring, disabled/invalid states) via Cn.Merge and forwards to NaviusDateInput.

Data attribute hooks

Part	Attribute	Description
Root	data-disabled	Present when Disabled is true, emitted by the composed primitive; drives the disabled row styling.
Root	data-invalid	Present when Invalid is true, emitted by the composed primitive; drives the destructive-ring styling.
Segment	data-placeholder	Present on an unfilled segment, emitted by the composed primitive; drives muted placeholder text.
Segment	data-segment="literal"	Present on a literal separator segment (e.g. /), emitted by the composed primitive; drives muted text.

Underlying primitives

• NaviusDateInput