Time Picker

Overview

TimePicker composes the headless NaviusTimePicker primitive family, which owns the segmented-field value model and the popup’s scrollable hour/minute/second/day-period columns. ZitsTimePicker itself owns the controlled-vs-uncontrolled bookkeeping for Value/Open (mirroring whether the caller supplied the parameter via SetParametersAsync), so both @bind-Value/@bind-Open and DefaultValue/DefaultOpen work through the one wrapper. The styled layer adds the bordered input row, the trailing clock-icon trigger, and the popup’s column list styling.

Install

navius add time-picker --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsTimePicker @bind-Value="_time" />

@code {
    private TimeOnly? _time;
}

Parts and props

TimePicker is a single control with no separate part components; the input row, trigger, and popup columns are all rendered internally. The wrapper’s parameters:

Prop	Type	Default	Description
Value / ValueChanged	TimeOnly? / EventCallback<TimeOnly?>	n/a	Two-way bindable via @bind-Value.
DefaultValue	TimeOnly?	null	Uncontrolled initial value, used only when Value isn’t set.
Open / OpenChanged	bool / EventCallback<bool>	false	Popup open state, two-way bindable via @bind-Open.
DefaultOpen	bool	false	Uncontrolled initial open state.
Granularity	string	"minute"	hour | minute | second. Controls which columns render.
HourCycle	int?	null	12 or 24; defaults to the current culture’s short-time pattern.
MinuteStep / SecondStep	int	1	Step size for the minute/second columns.
Disabled	bool	false	Disables the field and trigger.

Styling surface

Attributes on ZitsTimePicker is applied to the outer bordered row (via Cn.Merge); the input segments, trigger, and popup column classes are fixed preset strings, not exposed as overridable parameters.

Parameter	Values
Granularity	hour · minute · second
HourCycle	12 · 24

Data attribute hooks

Part	Attribute	Description
Outer row	data-disabled	Present when Disabled is true, styled with data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50.
Segment	data-placeholder, data-segment="literal"	Empty-segment and literal-separator hooks emitted by the composed NaviusTimePickerInput primitive.
Popup	data-open, data-closed, data-side	Open-state and placement hooks driving the enter/exit and slide-in Tailwind animation classes, emitted by the composed NaviusTimePickerContent primitive.
Column option	data-highlighted, data-selected	Item state hooks emitted by the composed NaviusTimePickerColumn primitive.

Underlying primitives

• NaviusTimePicker