CircularTimePicker
Picking a time can be tough without context. 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
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Text input
DateFormat
provided for the BitCircularTimePicker.
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Value format
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Style & Class
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Binding
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Culture
You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.
1
2
3
4
5
6
7
8
9
10
11
12
Templates
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
![](https://img.icons8.com/fluency/2x/clock.png)
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Responsive
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Validation
RTL
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Implementation
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. |
IsResponsive | bool | false | Enables the responsive mode in small screens. |
IsUnderlined | bool | false | Whether or not the Text field of the TimePicker is underlined. |
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. |
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. |
TabIndex | int | 0 | The tabIndex of the TextField. |
TimeFormat | BitTimeFormat | BitTimeFormat.TwentyFourHours | The time format of the time-picker, 24H or 12H. |
Value | TimeSpan? | null | The value of TimePicker. |
ValueChanged | EventCallback<TimeSpan?> | Callback for when the on time value changed. | |
ValueFormat | string? | null | The format of the time in the TimePicker like "HH:mm". |
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. |
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. |