Selected time: @secondsTime.ToString()

``` ```csharp private TimeSpan? secondsTime = new(14, 5, 30); ``` \n**Edit mode & views**: ```razor

Last view change: @(changedView?.ToString() ?? "-")

``` ```csharp private BitCircularTimePickerView? changedView; ``` \n**Steps**: ```razor ``` \n**Selectable range**: ```razor ``` \n**Picker actions**: ```razor ``` \n**Open state**: ```razor @(isCalloutOpen ? "Close" : "Open") from outside ``` ```csharp private bool isCalloutOpen; ``` \n**Text input**: ```razor ``` \n**Value format**: ```razor ``` \n**Binding**: ```razor

Selected time: @selectedTime.ToString()

Changed time: @changedTime.ToString()

``` ```csharp private TimeSpan? selectedTime = new(5, 12, 0); private TimeSpan? changedTime; ``` \n**Culture**: ```razor ``` ```csharp // The short time pattern of a culture spells the hour with an "h" where its readers expect a // 12-hour clock and with an "H" where they expect a 24-hour one. Only the format tokens of the // pattern say so: the "HH 'h' mm" of fr-CA carries an h of its own, as a quoted literal that is // text of the culture rather than an hour token. private static BitTimeFormat GetTimeFormatOf(CultureInfo culture) { var pattern = culture.DateTimeFormat.ShortTimePattern; char? quote = null; for (var i = 0; i < pattern.Length; i++) { var current = pattern[i]; // An escaped character stands for itself, so it is skipped along with the backslash escaping it. if (current == '\\') { i++; continue; } if (quote.HasValue) { if (current == quote) quote = null; continue; } if (current is '\'' or '"') { quote = current; continue; } if (current == 'h') return BitTimeFormat.TwelveHours; } return BitTimeFormat.TwentyFourHours; } ``` \n**ReadOnly**: ```razor ``` ```csharp private TimeSpan? readOnlyTime = new(2, 50, 0); ``` \n**Appearance**: ```razor ``` \n**Templates**: ```razor Custom label

Pick a time

Times are local

``` ```csharp private BitCircularTimePicker circularTimePicker = default!; private async Task OpenCallout() { await circularTimePicker.OpenCallout(); } ``` \n**Responsive**: ```razor ``` \n**Keyboard & accessibility**: ```razor ``` \n**Validation**: ```razor

Submit @if (string.IsNullOrEmpty(successMessage) is false) { @successMessage }

``` ```csharp public class FormValidationCircularTimePickerModel { [Required] public TimeSpan? Time { get; set; } } private string successMessage = string.Empty; private FormValidationCircularTimePickerModel formValidationCircularTimePickerModel = new(); private async Task HandleValidSubmit() { successMessage = "Form Submitted Successfully!"; await Task.Delay(3000); successMessage = string.Empty; StateHasChanged(); } private void HandleInvalidSubmit() { successMessage = string.Empty; } ``` \n**Events**: ```razor

@foreach (var log in eventLogs) {

@log

}

``` ```csharp private readonly List eventLogs = []; private void LogOpen() => Log("OnOpen"); private void LogClose() => Log("OnClose"); private void LogClick() => Log("OnClick"); private void LogFocusIn() => Log("OnFocusIn"); private void LogFocusOut() => Log("OnFocusOut"); private void LogViewChange(BitCircularTimePickerView view) => Log($"OnViewChange: {view}"); private void LogSelectTime(TimeSpan? time) => Log($"OnSelectTime: {time}"); private void LogChange(TimeSpan? time) => Log($"OnChange: {time}"); private void Log(string message) { eventLogs.Insert(0, message); if (eventLogs.Count > 8) { eventLogs.RemoveRange(8, eventLogs.Count - 8); } } ``` \n**Landscape**: ```razor ``` \n**Color**: ```razor ``` \n**External Icons**: ```razor ``` \n**Size**: ```razor ``` \n**Style & Class**: ```razor ``` ```csharp private TimeSpan? classesValue; ``` \n**RTL**: ```razor ```