Home Docs

CircularTimePicker

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.

Usage

Basic
Explore basic configurations of the BitCircularTimePicker, including labels, placeholders, icons, and time format feature.











Text input
The input field will open the BitCircularTimePicker, and clicking the field again will dismiss the BitCircularTimePicker and allow text input. Please note to use this feature, you must enter the date in the exact DateFormat provided for the BitCircularTimePicker.
Value format
Applications can customize how dates are formatted and parsed. Formatted dates can be ambiguous, so the control will avoid parsing the formatted strings of dates selected using the UI when text input is allowed. In this example, we are formatting and parsing times as hh-mm.ss.
Binding
Bind a selected time to a model or view, allowing two-way data binding with the BitCircularTimePicker.


Selected time: 05:12:15
Culture
By default, BitCircularTimePicker picks the current culture. But you can provide your own instance of CultureInfo for any custom culture.
You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.

Standalone
Use the BitCircularTimePicker in a standalone mode, allowing it to function independently without a surrounding form or container.







ReadOnly
The ReadOnly parameter makes the time picker input non-editable, preventing users from manually changing the time value.







Templates
In this example, the callout of the BitCircularTimePicker would be opened and closed using an icon button which is customely located in the label. This functionality has been implemented using a public API provided in the BitCircularTimePicker.



Responsive
Enable responsive design for the BitCircularTimePicker, allowing it to adjust its layout and appearance based on the screen size.

Validation
Implement form validation with BitCircularTimePicker using data annotations, ensuring the user selects a valid date before submitting the form.




The custom invalid error message will show when an invalid time is entered.

Style & Class
Explore styling and class customization for BitCircularTimePicker, including component styles, custom classes, and detailed styles.


Component's Style & Class:





Styles & Classes:


RTL
Use BitCircularTimePicker in a right-to-left (RTL) layout.

API

BitCircularTimePicker 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.
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.
IconName string Clock Optional TimePicker icon.
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.
TabIndex int 0 The tabIndex of the TextField.
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".
BitInputBase parameters
Name
Type
Default value
Description
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.
BitInputBase 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.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
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.
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.
  • On this page