moonstone/DaySelector

Moonstone styled inline day selector components.

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

Members

DaySelectorComponent

An inline day of the week selection component, ready to use in Moonstone applications.

DaySelector may be used to select one or more days of the week from a horizontal list of abbreviated day names.

By default, DaySelector 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.

Usage:

<DaySelector
  defaultSelected={[2, 3]}
  longDayLabels
  onSelect={handleSelect}
/>
import DaySelector from '@enact/moonstone/DaySelector';

DaySelectorBaseComponent

A Moonstone styled inline 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 DaySelector.

import {DaySelectorBase} from '@enact/moonstone/DaySelector';
Properties
disabled
Boolean

Disables DaySelector and the control becomes non-interactive.

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

selected
ArrayNumberNumber

An array of numbers (0-indexed) representing the selected days of the week.

DaySelectorDecoratorHigher-Order Component

Applies Moonstone specific behaviors to DaySelector.

import {DaySelectorDecorator} from '@enact/moonstone/DaySelector';
Properties added to wrapped component
dayNameLength
String

The format for names of days used in the label.

Default: 'long'
disabled
Boolean

Applies a disabled style and prevents interacting with the component.

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

selected
ArrayNumberNumber

An array of numbers (0-indexed) representing the selected days of the week.

ArrayBooleanFunctionModuleNumberObjectString