Blazor TimePicker Example - Time Range
This sample demonstrates time range selection using two TimePicker components. Select a start time from the first TimePicker to enable the second TimePicker; then select an end time from the second control to produce a complete time range. The interaction models an appointment-selection scenario where a contiguous start–end interval is required.
Before a start time is chosen the end TimePicker remains disabled to prevent invalid ranges. Once the start time is selected, the end TimePicker becomes available so users can pick a valid end. Alternatively, enable the Business hours checkbox to populate the pickers with the full business interval (09:00 to 18:00) and switch both controls to a read-only state to confirm the selection.
The example highlights the user flow for establishing a bounded time interval and demonstrates how the Business hours option provides a single-click workflow to select and lock a predefined range. Read-only mode communicates that the selection is finalized and helps prevent accidental edits after confirmation.
Use this pattern when collecting appointment times, booking windows, or other start–end intervals that must be constrained and confirmed. The sample shows the enabling/disabling sequence, the Business hours shortcut behavior, and the final read-only confirmation to simplify user interaction while ensuring valid time ranges.
See also: