Moonstone styled expandable day picker components.
import DayPicker from '@enact/moonstone/DayPicker';Members
DayPickerComponent
An expandable day of the week selection component, ready to use in Moonstone applications.
DayPicker may be used to select one or more days of the week. Upon selection, it will display
the short names of each day selected or customizable strings when selecting
every day,
every weekday, and
every weekend day.
By default, DayPicker maintains the state of its selected property. Supply the
defaultSelected property to control its initial value. If you wish to directly control updates
to the component, supply a value to selected at creation time and update it in response to
onChange events.
DayPicker 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:
<DayPicker
defaultOpen
defaultSelected={[2, 3]}
onSelect={handleSelect}
title="Select a Day"
/>import DayPicker from '@enact/moonstone/DayPicker';Properties
The primary text label for the component.
The "aria-label" for the component.
By default, "aria-label" is set to the title and the full names of the selected days or the custom text when the weekend, week days, or all days is selected.
The initial value used when
openis not set.The initial value used when
selectedis not set.Disables DayPicker and the control becomes non-interactive.
Default: falseThe text displayed in the label when every day is selected
Default: 'Every Day'The text displayed in the label when every weekeday is selected
Default: 'Every Weekday'The text displayed in the label when every weekend day is selected
Default: 'Every Weekend'Called when the user requests the expandable close.
Called when the user requests the expandable open.
Called when an day is selected or unselected.
The event payload will be an object with the following members:
selected- An array of numbers representing the selected days, 0 indexedcontent- Localized string representing the selected days
Opens the component to display the day selection components.
Default: falseAn array of numbers (0-indexed) representing the selected days of the week.
DayPickerBaseComponent
A day of the week selection component.
This component is most often not used directly but may be composed within another component as it is within DayPicker.
import {DayPickerBase} from '@enact/moonstone/DayPicker';