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
Default 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
BitCircularTimePicker with 12 hours (AM/PM)
:
1
2
3
4
5
6
7
8
9
10
11
12
Disabled 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
Disabled BitCircularTimePicker with label
:
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Required BitCircularTimePicker
Validation will happen when the
Submit
button is clicked.BitCircularTimePicker allowing 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 time in the exact
TimeFormat
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
BitCircularTimePicker with custom time formatting
Applications can customize how times are formatted and parsed. Formatted times can be ambiguous, so the control will avoid parsing the formatted strings of times selected using the UI when text input is allowed.
In this example, we are formatting and parsing times as hh-mm.ss.
:
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
BitCircularTimePicker with a custom label
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.
:
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
BitCircularTimePicker with value two-way 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
BitCircularTimePicker with custom left-handed icon
:
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
BitCircularTimePicker with custom icon name
:
13
14
15
16
17
18
19
20
21
22
23
00
01
02
03
04
05
06
07
08
09
10
11
12
Custom Invalid Error Message
The custom invalid error message will show when an invalid time is entered.
Responsive 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
Implementation
BitCircularTimePicker parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
BitVisibility enum
Name |
Value |
Description |
---|---|---|
BitIconLocation enum
Name |
Value |
Description |
---|---|---|
BitCircularTimePickerEditMode enum
Name |
Value |
Description |
---|---|---|
BitTimeFormat enum
Name |
Value |
Description |
---|---|---|
BitVisibility enum
Name |
Value |
Description |
---|---|---|
BitDir enum
Name |
Value |
Description |
---|---|---|