Blazor TimePicker Example - Time Duration

This sample demonstrates the TimePicker popup list rendered with specific time‑duration metadata. Click or touch the TimePicker popup icon to open the list and select the desired time value.

The Time Duration example shows how to customize or disable individual time entries using the OnItemRender event. Each list item in this sample includes additional information about the duration to the next value; entries that should not be selectable are marked by adding the e-disabled class.

Use the OnItemRender handler to inject custom markup, apply CSS classes, or programmatically prevent selection for business rules such as blocked intervals or unavailable slots. Preserve the original anchor markup and ARIA attributes when customizing items to maintain accessibility.

When no value is selected or the selected value is not present in the popup list, use the ScrollTo property to set the initial scroll position so the most relevant time is visible on open. ScrollTo improves discoverability and reduces manual scrolling in long lists.

For visual consistency, style disabled entries with muted contrast and keep duration metadata concise to avoid truncation. Ensure keyboard and touch navigation remain functional after customization, and verify focus behavior when ScrollTo changes the viewport. Test the rendering across cultures, time formats, browsers, and devices so disabled states, scroll positioning, and duration labels behave predictably.