#
TimePicker
A TimePicker is a BaseField<TimeSpan> for a time of day: a box with the hour, the minute and AM / PM, and a popup with one column for each part. For a duration, use TimeSpanPicker.
<UIToolbox.TimePicker label="Alarm" value="06:30" />
<UIToolbox.TimePicker label="Train" clock="Hours24" value="18:05" />
<UIToolbox.TimePicker label="Meeting" clock="Hours12" minute-increment="15" value="14:00" />
var picker = new TimePicker("Alarm") { value = new TimeSpan(6, 30, 0) };
picker.RegisterValueChangedCallback(evt => Debug.Log(evt.newValue));
| Member |
Description |
value |
The time of day, from 00:00 to 23:59. A set drops the days and the seconds. Listen with RegisterValueChangedCallback. |
ValueText (value) |
The value as "hh:mm" on the 24-hour clock, such as "18:30". The picker ignores other text. |
Clock (clock) |
Culture (the default), Hours12 or Hours24. Culture uses the 24-hour clock when the short time pattern of the culture has "H". |
MinuteIncrement (minute-increment) |
The step of the minute column, from 1 (the default) to 30. 15 gives 00, 15, 30 and 45. |
Culture |
The culture of the AM and PM texts and of the Culture clock. Null (the default) uses CultureInfo.CurrentCulture. |
Is24Hour |
True when the picker shows hours 00 to 23 and no AM / PM. |
IsOpen, Open(), Close(), Toggle() |
The state of the popup. Close() keeps the value. |
Pending |
The time in the middle row of the popup columns. |
Accept() |
Makes Pending the value and closes the popup. |
Cancel() |
Closes the popup and keeps the value. |
#How to use it
| Input |
Effect |
| A click on the box, Enter, Space or Down |
Opens the popup at the value. |
| A click on a row |
Moves that row to the middle. The middle row is the picked value of the column. |
| The mouse wheel on a column |
Steps the column one row. |
| Left and Right (the keys or the gamepad) |
Changes the active column. The active column has its middle row in the accent color. |
| Up and Down |
Steps the active column one row. |
| The ✓ button, Enter or the gamepad submit |
Accepts: the picked time becomes the value. |
| The ✕ button, Escape, the gamepad cancel or a click outside |
Closes the popup. The value stays. |
- The popup changes nothing until the user accepts it. The picker sends one
ChangeEvent<TimeSpan> for each accept that changes the value.
- The hours and the minutes go round: the row after 59 is 00. AM and PM do not go round.
- On the 12-hour clock, the hour column does not change AM / PM. 11 PM plus one hour is 12 PM.
- With
MinuteIncrement more than 1, the value keeps a minute that is not on a step, such as 9:40 with a step of 15. The popup starts at the step before it (30), and an accept sets a minute on a step.
- The popup shows in the nearest
Workspace, so it gets the workspace theme. Outside a workspace it shows in the top element of its document.
DatePicker with ShowTime keeps its TimeSpanPicker for the time. Use a DatePicker and a TimePicker side by side when you want the columns.- The UXML value is a string, for the same reason as the dates of
DatePicker.
#Styling
| Class |
Element |
tb-time-picker |
The field. |
tb-time-picker__box |
The box with the segments (150 px or more). It has the focus of the field. |
tb-time-picker__segment |
The hour, the minute or the AM / PM text in the box. |
tb-time-picker__segment--divided |
A segment with a line on its left: the minute and the AM / PM text. |
tb-time-picker__popup |
The popup. It also has tb-popup. |
tb-time-picker__columns |
The row of columns. |
tb-time-picker__column |
One column. Each column is as wide as its segment. |
tb-time-picker__column--active |
The column that Up and Down change. |
tb-time-picker__row |
One row of a column (26 px high). A column has TimePicker.ROWS (7) rows. |
tb-time-picker__row--selected |
The middle row. |
tb-time-picker__footer |
The row with the buttons. |
tb-time-picker__accept, tb-time-picker__cancel |
The ✓ and the ✕ button. |
