Blazor TimePicker Example - Time Range
This sample demonstrates time range selection in the TimePicker component. Select a start time from the first TimePicker, then the second TimePicker will be enabled. Select an end time from the second TimePicker to get a time range. Click the Business hours checkbox to change both TimePickers to read-only state.
The Time Range example illustrates the appointment time selection scenario with start and end time options. Two TimePicker components are used to select the start and end time.
Before start time selection, the end time TimePicker is in disabled state. When the start time is selected, you can then select the end time. Alternatively, click the Business hours option to select the entire business hours (9:00 to 18:00). Once the options are confirmed, both TimePicker components go to read-only state.
See also: