TimePicker
A time selection input
Interactive-mode
Divergence from Blok
Value type is TimeSpan? (24-hour), not Blok's TimeValue { hour, minute, period: AM/PM }. Blok models time as a structured object with an AM/PM period flag so the 12-hour display and the 24-hour internal representation can diverge. Blazor's TimeSpan is naturally 24-hour; we display in 24-hour by default and format via a Format string for 12-hour presentation. Consumers migrating from Blok need to convert their TimeValue to TimeSpan on binding (and ignore the period field, which our component infers from the hour).
Examples
Default
Disabled
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| TimePicker | Wraps a native <input type="time"> styled to match Blok. Two-way bindable via @bind-Value to a TimeSpan?. |
TimePicker
Wraps a native <input type="time"> styled to match Blok. Two-way bindable via @bind-Value to a TimeSpan?.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | TimeSpan? | Selected time as a 24-hour TimeSpan. Null when unset or the underlying input is cleared. | |
| ValueChanged | EventCallback<TimeSpan?> | Invoked when the user edits the time. | |
| Disabled | bool | When true, the input is read-only and visually muted. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the outer wrapper. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the underlying <input>. |