enact logoEnact
Edit on GitHub

sandstone/DatePicker

Date selection components and behaviors.

import DatePicker from '@enact/sandstone/DatePicker';

Members

DatePickerComponent

A date selection component, ready to use in Sandstone 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 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}
/>
import DatePicker from '@enact/sandstone/DatePicker';
Properties
defaultValue
Date

The initial value used when value is not set.

value
Date

The selected date

DatePickerBaseComponent

A date selection component.

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

import {DatePickerBase} from '@enact/sandstone/DatePicker';
Properties
day •
Number

The day component of the Date.

The value should be a number between 1 and maxDays.

maxDays •
Number

The number of days in the month.

maxMonths •
Number

The number of months in the year.

month •
Number

The month component of the Date.

The value should be a number between 1 and maxMonths.

order •
ArrayString

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'.

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.

onComplete
Function

Called when Enter key down on the last picker

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'.

dateToLocaleStringFunction

dateToLocaleString( date )String|null

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

1 Param
date Date

Date to convert

Returns
Stringnull

Converted date or null if date is invalid

ArrayBooleanFunctionModuleNumberObjectString