moonstone/DayPicker

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
title
String

The primary text label for the component.

aria-label
String

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.

defaultOpen
Boolean

The initial value used when open is not set.

defaultSelected
ArrayNumberNumber

The initial value used when selected is not set.

disabled
Boolean

Disables DayPicker and the control becomes non-interactive.

Default: false
everyDayText
String

The text displayed in the label when every day is selected

Default: 'Every Day'
everyWeekdayText
String

The text displayed in the label when every weekeday is selected

Default: 'Every Weekday'
everyWeekendText
String

The text displayed in the label when every weekend day is selected

Default: 'Every Weekend'
onClose
Function

Called when the user requests the expandable close.

onOpen
Function

Called when the user requests the expandable open.

onSelect
Function

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 indexed

  • content - Localized string representing the selected days

open
Boolean

Opens the component to display the day selection components.

Default: false
selected
ArrayNumberNumber

An 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';
ArrayBooleanFunctionModuleNumberObjectString