Accent color
# CircularTimePicker
## Description
A BitCircularTimePicker offers a drop-down control that’s optimized for picking a single time from a clock view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available times.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AllowTextInput | `bool` | false | Whether the TimePicker allows input a time string directly or not. |
| AutoClose | `bool` | false | If AutoClose is set to true and PickerActions are defined, the hour and the minutes can be defined without any action. |
| CalloutAriaLabel | `string` | Clock | Aria label for time picker popup for screen reader users. |
| CalloutHtmlAttributes | `Dictionary<string, object>` | new Dictionary<String, Object>() | Capture and render additional attributes in addition to the main callout's parameters. |
| Classes | `BitCircularTimePickerClassStyles` | null | Custom CSS classes for different parts of the TimePicker. |
| CloseButtonIcon | `BitIconInfo?` | null | The icon for the close button using external icon libraries. Takes precedence over CloseButtonIconName when both are set. |
| CloseButtonIconName | `string?` | Cancel | The name of the icon for the close button from the built-in Fluent UI icons. For external icon libraries, use CloseButtonIcon instead. |
| CloseButtonTitle | `string` | Close time picker | The title of the close button (tooltip). |
| Culture | `CultureInfo` | CultureInfo.CurrentUICulture | CultureInfo for the TimePicker. |
| EditMode | `BitCircularTimePickerEditMode` | BitCircularTimePickerEditMode.Normal | Choose the edition mode. By default, you can edit hours and minutes. |
| HasBorder | `bool` | true | Determines if the TimePicker has a border. |
| IconLocation | `BitIconLocation` | BitIconLocation.Right | TimePicker icon location. |
| Icon | `BitIconInfo?` | null | The icon to display using custom CSS classes for external icon libraries (e.g., FontAwesome, Bootstrap Icons). Takes precedence over IconName when both are set. |
| IconName | `string?` | Clock | The name of the icon from the built-in Fluent UI icons. For external icon libraries, use Icon instead. |
| IconTemplate | `RenderFragment?` | null | Custom TimePicker icon template. |
| InvalidErrorMessage | `string?` | null | The custom validation error message for the invalid value. |
| IsOpen | `bool` | false | Whether or not this TimePicker is open. |
| Label | `string?` | null | Label for the TimePicker. |
| LabelTemplate | `RenderFragment?` | null | Used to customize the label for the TimePicker. |
| OnClick | `EventCallback` | | Callback for when clicking on TimePicker input. |
| OnFocus | `EventCallback` | | Callback for when focus moves into the TimePicker input. |
| OnFocusIn | `EventCallback` | | Callback for when focus moves into the TimePicker input. |
| OnFocusOut | `EventCallback` | | Callback for when clicking on TimePicker input. |
| OnSelectTime | `EventCallback<TimeSpan?>` | | Callback for when the on selected time changed. |
| Placeholder | `string?` | null | Placeholder text for the DatePicker. |
| Responsive | `bool` | false | Enables the responsive mode in small screens. |
| ShowCloseButton | `bool` | false | Whether the TimePicker's close button should be shown or not. |
| Styles | `BitCircularTimePickerClassStyles` | null | Custom CSS styles for different parts of the TimePicker. |
| Standalone | `bool` | false | Whether the TimePicker is rendered standalone or with the input component and callout. |
| TimeFormat | `BitTimeFormat` | BitTimeFormat.TwentyFourHours | The time format of the time-picker, 24H or 12H. |
| Underlined | `bool` | false | Whether or not the Text field of the TimePicker is underlined. |
| ValueFormat | `string?` | null | The format of the time in the TimePicker like "HH:mm". |
| DefaultValue | `TValue?` | null | The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback. |
| DisplayName | `string?` | null | Gets or sets the display name for this field. |
| InputHtmlAttributes | `IReadOnlyDictionary<string, object>?` | null | Gets or sets a collection of additional attributes that will be applied to the created element. |
| Name | `string?` | null | Gets or sets the name of the element. Allows access by name from the associated form. |
| NoValidate | `bool` | false | Disables the validation of the input. |
| OnChange | `EventCallback<TValue?>` | | Callback for when the input value changes. |
| ReadOnly | `bool` | false | Makes the input read-only. |
| Required | `bool` | false | Makes the input required. |
| Value | `TValue?` | null | Gets or sets the value of the input. This should be used with two-way binding. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| InputElement | `ElementReference` | | The ElementReference of the input element. |
| FocusAsync() | `() => ValueTask` | | Gives focus to the input element. |
| FocusAsync(bool preventScroll) | `(bool preventScroll) => ValueTask` | | Gives focus to the input element. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | Show content of the component. |
| Hidden | 1 | Hide content of the component,though the space it takes on the page remains. |
| Collapsed | 2 | Hide content of the component,though the space it takes on the page gone. |
### BitIconLocation Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Left | 0 | Show the icon at the left side. |
| Right | 1 | Show the icon at the right side. |
### BitCircularTimePickerEditMode Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Normal | 0 | Can edit hours and minutes. |
| OnlyMinutes | 1 | Can edit only minutes. |
| OnlyHours | 1 | Can edit only hours. |
### BitTimeFormat Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| TwentyFourHours | 0 | Show time pickers in 24 hours format. |
| TwelveHours | 1 | Show time pickers in 12 hours format. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitCircularTimePickerClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitCircularTimePicker. |
| Focused | `string?` | null | Custom CSS classes/styles for the focused state of the BitCircularTimePicker. |
| Label | `string?` | null | Custom CSS classes/styles for the Label of the BitCircularTimePicker. |
| InputWrapper | `string?` | null | Custom CSS classes/styles for the input wrapper of the BitCircularTimePicker. |
| InputContainer | `string?` | null | Custom CSS classes/styles for the input container of the BitCircularTimePicker. |
| Input | `string?` | null | Custom CSS classes/styles for the input of the BitCircularTimePicker. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon of the BitCircularTimePicker. |
| Overlay | `string?` | null | Custom CSS classes/styles for the overlay of the BitCircularTimePicker. |
| Callout | `string?` | null | Custom CSS classes/styles for the callout of the BitCircularTimePicker. |
| CalloutContainer | `string?` | null | Custom CSS classes/styles for the callout container of the BitCircularTimePicker. |
| Toolbar | `string?` | null | Custom CSS classes/styles for the toolbar of the BitCircularTimePicker. |
| HourMinuteContainer | `string?` | null | Custom CSS classes/styles for the hour and minute container of the BitCircularTimePicker. |
| HourButton | `string?` | null | Custom CSS classes/styles for the hour button of the BitCircularTimePicker. |
| MinuteButton | `string?` | null | Custom CSS classes/styles for the minute button of the BitCircularTimePicker. |
| HourMinuteSeparator | `string?` | null | Custom CSS classes/styles for the hour minute separator of the BitCircularTimePicker. |
| HourMinuteText | `string?` | null | Custom CSS classes/styles for the hour/minute text of the BitCircularTimePicker. |
| AmPmContainer | `string?` | null | Custom CSS classes/styles for the AM/PM container of the BitCircularTimePicker. |
| AmButton | `string?` | null | Custom CSS classes/styles for the AM button of the BitCircularTimePicker. |
| PmButton | `string?` | null | Custom CSS classes/styles for the PM button of the BitCircularTimePicker. |
| SelectedButtons | `string?` | null | Custom CSS classes/styles for the selected buttons of the BitCircularTimePicker. |
| ClockContainer | `string?` | null | Custom CSS classes/styles for the clock container of the BitCircularTimePicker. |
| ClockFace | `string?` | null | Custom CSS classes/styles for the clock face of the BitCircularTimePicker. |
| ClockPin | `string?` | null | Custom CSS classes/styles for the clock pin of the BitCircularTimePicker. |
| ClockNumber | `string?` | null | Custom CSS classes/styles for the clock number of the BitCircularTimePicker. |
| ClockSelectedNumber | `string?` | null | Custom CSS classes/styles for the clock selected number of the BitCircularTimePicker. |
| ClockPointer | `string?` | null | Custom CSS classes/styles for the clock pointer of the BitCircularTimePicker. |
| ClockPointerThumb | `string?` | null | Custom CSS classes/styles for the clock pointer thumb of the BitCircularTimePicker. |
| ClockPointerThumbMinute | `string?` | null | Custom CSS classes/styles for the close button of the BitCircularTimePicker. |
| CloseButton | `string?` | null | Custom CSS classes/styles for the close button of the BitCircularTimePicker. |
| CloseButtonIcon | `string?` | null | Custom CSS classes/styles for the close button icon of the BitCircularTimePicker. |
## Examples
\n**Basic**:
```razor
Custom label
```
```csharp
private BitCircularTimePicker circularTimePicker;
private async Task OpenCallout()
{
await circularTimePicker.OpenCallout();
}
```
\n**Responsive**:
```razor
Submit
@if (string.IsNullOrEmpty(successMessage) is false)
{
@successMessage
}
```
```csharp
public class FormValidationCircularTimePickerModel
{
[Required]
public DateTimeOffset? Date { get; set; }
}
private FormValidationCircularTimePickerModel formValidationCircularTimePickerModel = new();
private async Task HandleValidSubmit()
{
await Task.Delay(3000);
formValidationCircularTimePickerModel = new();
StateHasChanged();
}
```
\n**External Icons**:
```razor
Selected time: @selectedTime.ToString()
```
```csharp
private TimeSpan? selectedTime = new(5, 12, 15);
```
\n**Culture**:
```razor