limestone/DatePicker

Date selection components and behaviors.

Loading Live Preview

Members

DatePicker Component

A date selection component, ready to use in Limestone applications.

DatePicker may be used to select the year, month, and day. It uses a standard Date object for its value which can be shared as the value for a limestone/TimePickerlimestone/TimePicker.TimePicker to select both a date and time.

By default, DatePicker 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.

Usage:

<DatePicker
 defaultValue={selectedDate}
 onChange={handleChange}
/>

Extends: limestone/DatePickerlimestone/DatePicker.DatePickerBase
Wrapped with: ui/Changeableui/Changeable.Changeable

Properties

defaultValue

Date

The initial value used when value is not set.

value

Date

The selected date

DatePickerBase Component

A date selection component.

This component is most often not used directly but may be composed within another component as it is within limestone/DatePickerlimestone/DatePicker.DatePicker.

Properties

Required Property • day

Number

The day component of the Date.

The value should be a number between 1 and maxDays.

Required Property • maxDays

Number

The number of days in the month.

Required Property • maxMonths

Number

The number of months in the year.

Required Property • month

Number

The month component of the Date.

The value should be a number between 1 and maxMonths.

Required Property • order

Array(String)

The order in which the component pickers are displayed.

The value should be an array of 3 strings containing one of 'm', 'd', and 'y'.

Required Property • year

Number

The year component of the Date.

data-webos-voice-disabled

Boolean

Disables voice control.

dayAriaLabel

String

The "aria-label" for the day picker.

If not specified, the "aria-label" for the day picker will be a combination of the current value and 'day change a value with up down button'.

disabled

Boolean

Disables the DatePicker.

label

String

The primary text of the DatePicker.

maxYear

Number

The maximum selectable year value.

Default: 2099

minYear

Number

The minimum selectable year value.

Default: 1900

monthAriaLabel

String

The "aria-label" for the month picker.

If not specified, the "aria-label" for the month picker will be a combination of the current value and 'month change a value with up down button'.

noLabel

Boolean

Hides the label that displays the date.

onChangeDate

Function

Called when the date component of the Date changes.

onChangeMonth

Function

Called when the month component of the Date changes.

onChangeYear

Function

Called when the year component of the Date changes.

onSpotlightDisappear

Function

Called when the component is removed when it had focus.

onSpotlightLeft

Function

Called prior to focus leaving the picker when the 5-way left key is pressed.

onSpotlightRight

Function

Called prior to focus leaving the picker when the 5-way right key is pressed.

spotlightDisabled

Boolean

Disables 5-way spotlight from navigating into the component.

Default: false

yearAriaLabel

String

The "aria-label" for the year picker.

If not specified, the "aria-label" for the year picker will be a combination of the current value and 'year change a value with up down button'.

onComplete

Function

Called when Enter key down on the last picker

dateToLocaleString Function

dateToLocaleString( date ) → String  |  any

Converts a standard Date object into a locale-specific string.

1 Param

date Date: Date to convert

Returns

String | any: Converted date or null if date is invalid