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
The initial value used when
openis not set.The initial value used when
valueis not set.Opens the component to display the date component pickers.
Default: falseThe 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
The
daycomponent of the Date.The value should be a number between 1 and
maxDays.The number of days in the month.
The number of months in the year.
The
monthcomponent of the Date.The value should be a number between 1 and
maxMonths.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'.The primary text of the item.
The
yearcomponent of the Date.Disables voice control.
The "aria-label" for the day picker.
Default: 'change a value with up down button'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'The maximum selectable
yearvalue.Default: 2099The minimum selectable
yearvalue.Default: 1900The "aria-label" for the month picker.
Default: 'change a value with up down button'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'Omits the labels below the pickers.
Called when the
datecomponent of the Date changes.Called when the
monthcomponent of the Date changes.Called when the
yearcomponent of the Date changes.Called when the user requests the expandable close.
Called when the component is removed when it had focus.
Called prior to focus leaving the expandable when the 5-way left key is pressed.
Called prior to focus leaving the expandable when the 5-way right key is pressed.
Disables 5-way spotlight from navigating into the component.
Default: falseThe "aria-label" for the year picker.
Default: 'change a value with up down button'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'