moonstone/TimePicker

Provides a Moonstone-themed time selection component.

import TimePicker from '@enact/moonstone/TimePicker';

Members

TimePickerComponent

A component that allows displaying or selecting time.

Set the value property to a standard JavaScript Date object to initialize the picker.

By default, TimePicker maintains the state of its value property. Supply the defaultValue property to control its initial value. If you wish to directly control updates to the component, supply a value to value at creation time and update it in response to onChange events.

It is expandable and it maintains its open/closed state by default. defaultOpen can be used to set the initial state. For the direct control of its open/closed state, supply a value for open at creation time and update its value in response to onClose/onOpen events.

import TimePicker from '@enact/moonstone/TimePicker';
Properties
title
String

The primary text of the item.

defaultValue
Number

Default value

noLabels
Boolean

Omits the labels below the pickers.

onClose
Function

Called when a condition occurs which should cause the expandable to close.

value
Date

The selected date.

TimePickerBaseComponent

moonstone/TimePicker.TimePickerBase is the stateless functional time picker component. Should not be used directly but may be composed within another component as it is within moonstone/TimePicker.TimePicker.

import {TimePickerBase} from '@enact/moonstone/TimePicker';
Properties
hour
Number

The hour component of the time.

meridiem
Number

The meridiem component of the time.

meridiems
ArrayString

Array of meridiem labels to display.

minute
Number

The minute component of the time.

order
ArrayString

The order in which the component pickers are displayed.

Should be an array of 2 or 3 strings containing one of 'h', 'k', 'm', and 'a'.

title
String

The primary text of the item.

data-webos-voice-disabled
Boolean

Disables voice control.

hourAriaLabel
String

The "aria-label" for the hour picker

Default: 'change a value with up down button'
hourLabel
String

Sets the hint string read when focusing the hour picker.

Default: 'hour'
meridiemAriaLabel
String

The "aria-label" for the meridiem picker.

Default: 'change a value with up down button'
meridiemLabel
String

The hint string read when focusing the meridiem picker.

minuteAriaLabel
String

The "aria-label" for the minute picker.

Default: 'change a value with up down button'
minuteLabel
String

Sets the hint string read when focusing the minute picker.

Default: 'minute'
noLabels
Boolean

Omits the labels below the pickers.

onChangeHour
Function

Called on changes in the hour component of the time.

onChangeMeridiem
Function

Called on changes in the meridiem component of the time.

onChangeMinute
Function

Called on changes in the minute component of the time.

onClose
Function

Called when a condition occurs which should cause the expandable to close.

onSpotlightDisappear
Function

Called when the component is removed while retaining focus.

onSpotlightLeft
Function

Called when the focus leaves the expandable when the 5-way left key is pressed.

onSpotlightRight
Function

Called when the focus leaves the expandable when the 5-way right key is pressed.

spotlightDisabled
Boolean

Disables spotlight navigation into the component.

Default: false
ArrayBooleanFunctionModuleNumberObjectString