TimePicker
A time picker that supports both the text input and a dropdown with buttons.
Showcase
Source
<TimePicker right />
<TimePicker format="%H.%M.%S %P" />
<TimePicker hideNow />Properties #
Style Properties
Name | Default | Type | Description |
|---|---|---|---|
hideNow | false | boolean | Hides the now button from the component. |
right | false | boolean | Aligns the dropdown with the right edge of the text field. |
top | false | boolean | Aligns the dropdown content such that it opens to the top of the text field, extending up. |
Functional Properties
Name | Default | Type | Description |
|---|---|---|---|
value | null | Date | The currently selected time value. Even though a whole Date object is needed, only the time part will be considered. |
format | '%H:%M' | string | The format used to display time and consume input. The %-specifiers are a subset of C date format specifiers, with only %H, %M, %S, %P and %p allowed. %P stands for AM/PM, while %p stands for am/pm. |
amPmTabName | 'am-pm' | string | If the %P or %p modifier is used in the format, the dropdown will contain tabs to switch between AM and PM. You may change the name of the radio group for these tabs to avoid collisions. |
hours | [1..12] (12 hours mode) or [0..23] (24 hours mode) | number[] | The list of possible hours to choose from. |
minutes | [0, 5, ..., 55] | number[] | The list of possible minutes to choose from. |
seconds | [0, 5, ..., 55] if using seconds or [] otherwise | number[] | The list of possible seconds to choose from. |
Hint: use range from the utils to generate a range of numbers.
Class Properties
All <TimePicker> components use the .time-picker class.
Falsy values passed to classes will be disregarded.
Name | Default | Type | Description |
|---|---|---|---|
class | null | string | A class string to add to the component. |
inputClass | null | string | A class string to pass down to the TextField. |
Events #
Name | Event Detail | Description |
|---|---|---|
change | { value } | Fired when the value of the picker changes. |
Slots #
hours-label slot
Label for hour selector. Defaults to the <Label /> component with the text "Hours".
minutes-label slot
Label for the minutes selector. Defaults to the <Label /> component with the text "Minutes".
seconds-label slot
Label for the seconds selector. Defaults to the <Label /> component with the text "Seconds".
now-icon slot
Icon on button to select the current time. Defaults to the <Clock /> icon from Feather Icons.
now-label slot
Text on button to select the current time. Defaults to the text "now".
SCSS Variables #
Name | Description | Default |
|---|---|---|
$textfield-bg | The background color of the text field. | #F5F5F5 |
$main | The color of the bottom border of the focused text field border, the buttons, the selected tab and the labels. | #4300B0 |
$light-contrast | The color of borders and WebKit scrollbars inside the dropdown. | #DDDDDD |
$background | The background of the WebKit scrollbars, to ensure they don'y stand out from the background. | #FFFFFF |
$font From Button | The font of the buttons' text and the text fields. | 'Ubuntu' |
$button-radius From Button | The curvature radius of buttons. | 1.5625em |
$bold-font-weight From Button | The font weight of the buttons and the labels. | 500 |
$background From Dropdown | The background color of the dropdown content | #FFFFFF |
$shadow-raised From Dropdown | The shadow of the dropdown. | hover me 0 2px 4px -1px rgba(0, 0, 0, .2), 0 3px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12); |
$card-radius From Dropdown | The curvature radius of the dropdown. | 1.25em |
$textfield-border From TextField | The border color of the unselected text field. | rgba(0, 0, 0, .42) |
$thin-font-weight From TextField | The thin font weight for the text inside the text field. | 300 |
$off-state From Tab | Affects the background color of the unselected tab. | #AAAAAA |