Time Picker

The default TimePicker uses 12-hour format with an AM/PM toggle. Bind to a TimeSpan? value with @bind-Value for two-way data binding. The popover includes hour and minute spinners, a Now button to set the current time, and a Clear button to reset.

Set Format to TimeFormat.Hour24 to use 24-hour time without an AM/PM toggle. This format is standard in many international contexts, military applications, and technical interfaces where ambiguity between AM and PM must be avoided.

Enable the ShowSeconds parameter to add a seconds spinner column. This is useful for precise time tracking, logging interfaces, or scientific applications where second-level accuracy is required.

Set MinuteStep to restrict minute values to specific intervals. This example uses 15-minute steps, which is common for appointment scheduling and meeting planners where granular minute selection is unnecessary.

Use MinTime and MaxTime to restrict selection to a specific time window. This example limits selection to business hours (9:00 AM to 5:00 PM), clamping any values that exceed the boundaries to the nearest valid time.

Use the Class parameter to apply custom Tailwind CSS classes to the trigger button. This example shows a wider trigger with gradient styling, demonstrating how to customise the appearance for different design contexts.

Combine the TimePicker with a DatePicker for full datetime selection. Place them side by side in a flex container to create a cohesive datetime input. The combined result is computed by adding the selected time to the selected date.

Set Disabled to true to prevent user interaction. The trigger button and all spinner controls become non-interactive with reduced opacity, suitable for read-only time displays or locked form fields.