moonstone/DatePicker

Date selection components and behaviors.

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

Members

DatePickerComponent

An expand date selection component, ready to use in Moonstone 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.

DatePicker is an expandable component and it maintains its open/closed state by default. The initial state can be supplied using defaultOpen. In order to directly control the open/closed state, supply a value for open at creation time and update its value in response to onClose/onOpen events.

Usage:

<DatePicker
 defaultValue={selectedDate}
 onChange={handleChange}
 title="Select Date"
/>
import DatePicker from '@enact/moonstone/DatePicker';
Properties
defaultOpen
Boolean

The initial value used when open is not set.

defaultValue
Date

The initial value used when value is not set.

open
Boolean

Opens the component to display the date component pickers.

Default: false
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/moonstone/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'.

title
String

The primary text of the item.

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.

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

The label displayed below the day picker.

This prop will also be appended to the current value and set as "aria-valuetext" on the picker when the value changes.

Default: 'day'
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.

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

The label displayed below the month picker.

This prop will also be appended to the current value and set as "aria-valuetext" on the picker when the value changes.

Default: 'month'
noLabels
Boolean

Omits the labels below the pickers.

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.

onClose
Function

Called when the user requests the expandable close.

onSpotlightDisappear
Function

Called when the component is removed when it had focus.

onSpotlightLeft
Function

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

onSpotlightRight
Function

Called prior to focus leaving the expandable 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.

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

The label displayed below the year picker.

This prop will also be appended to the current value and set as "aria-valuetext" on the picker when the value changes.

Default: 'year'
ArrayBooleanFunctionModuleNumberObjectString