DayButtons
A segmented button field allowing you to pick one or more days of the week.
This live demo shows the default look + the "padded" rendition:
Day buttons
//<code-header>
fiddle.title = 'Day buttons';
//</code-header>
const buttons = new DayButtons({
appendTo : targetElement,
value : ['MO', 'TU', 'TH'],
onAction() {
Toast.show(`You selected ${this.value || 'no days'}`);
}
});
const paddedButtons = new DayButtons({
appendTo : targetElement,
value : ['MO', 'TU', 'TH'],
rendition : 'padded',
onAction() {
Toast.show(`You selected ${this.value || 'no days'}`);
}
});Configs
98
Configs
98Common
listenersEvents
Other
Number of chars to display for each day
pressedCls: String
A CSS class to add to the pressed state of the buttons.
The value for this button group can be set as either an array of strings (e.g., [‘SU’, ‘WE’, ‘TH’]), or an array of day numbers (where 0 represents Sunday).
new DayButtons({
appendTo : document.body,
value : [0,1]
})
callOnFunctionsWidget
colorButtonGroup
columnWidget
defaultFocusContainer
inputFieldAlignContainer
itemsButtonGroup
labelPositionContainer
renditionButtonGroup
rtlRTL
spanWidget
toggleableButtonGroup
toggleGroupButtonGroup
useGapButtonGroup
CSS
borderContainer
clsButtonGroup
contentElementClsWidget
htmlClsWidget
itemClsContainer
styleWidget
uiWidget
DOM
adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
tagWidget
titleWidget
Float & align
alignWidget
anchorWidget
centeredWidget
constrainToWidget
draggableWidget
floatingWidget
hideAnimationWidget
maximizeOnMobileWidget
positionedWidget
scrollActionWidget
showAnimationWidget
xWidget
yWidget
Layout
alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
hideWhenEmptyContainer
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget
misc
tabBarItemsContainer
Misc
bubbleEventsEvents
dataFieldWidget
defaultBindPropertyWidget
disabledWidget
elementAttributesWidget
ignoreParentReadOnlyWidget
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
maskDefaultsWidget
maskedWidget
monitorResizeWidget
ownerWidget
preventTooltipOnTouchWidget
readOnlyWidget
refWidget
rippleWidget
rootElementWidget
showTooltipWhenDisabledWidget
tabWidget
tooltipWidget
Scrolling
scrollableWidget
Properties
86
Properties
86Class hierarchy
Identifies an object as an instance of DayButtons class, or subclass thereof.
Identifies an object as an instance of DayButtons class, or subclass thereof.
isButtonGroupButtonGroup
isContainerContainer
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isRTLRTL
isWidgetWidget
Other
The value for this button group can be set as either an array of strings (e.g., [‘SU’, ‘WE’, ‘TH’]), or an array of day numbers (where 0 represents Sunday).
new DayButtons({
appendTo : document.body,
value : [0,1]
})
An array of the selected days, represented as JS day numbers (0 - Sunday, 1 - Monday etc.).
columnWidget
firstItemContainer
hasChangesContainer
inputFieldAlignContainer
isSettingValuesContainer
isValidContainer
itemsContainer
labelPositionContainer
lastItemContainer
renditionButtonGroup
rtlRTL
spanWidget
toggleableButtonGroup
valuesContainer
CSS
clsWidget
DOM
appendToWidget
contentWidget
contentElementWidget
datasetWidget
elementWidget
focusableElementWidget
focusElementWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
overflowElementWidget
styleWidget
Layout
alignSelfWidget
flexWidget
heightWidget
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
scrollableWidget
widthWidget
Misc
callOnFunctionsEvents
cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget
Widget hierarchy
containsFocusWidget
nextSiblingWidget
ownerWidget
parentWidget
previousSiblingWidget
visibleChildCountContainer
widgetMapContainer
Functions
67
Functions
67Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
resolveCallbackBase
updateLocalizationLocalizable
Other
addContainer
addListenerEvents
announceAriaLiveWidget
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
exitFullscreenWidget
focusWidget
getAtContainer
getWidgetByIdContainer
hasListenerEvents
insertContainer
maskWidget
onEvents
processWidgetConfigContainer
recomposeWidget
relayAllEvents
removeContainer
removeAllContainer
removeAllListenersEvents
removeListenerEvents
requestFullscreenWidget
resetValuesContainer
resumeEventsEvents
revertFocusWidget
setValuesContainer
suspendEventsEvents
triggerEvents
unEvents
unmaskWidget
Widget hierarchy
closestWidget
containsWidget
eachAncestorWidget
eachWidgetWidget
ownsWidget
queryWidget
queryAllWidget
upWidget
Events
19
Events
19actionButtonGroup
beforeDestroyEvents
beforeHideWidget
beforeSetRecordContainer
beforeShowWidget
catchAllEvents
clickButtonGroup
destroyEvents
dirtyStateChangeContainer
elementCreatedWidget
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
toggleButtonGroup
Event handlers
19
Event handlers
19onActionButtonGroup
onBeforeDestroyEvents
onBeforeHideWidget
onBeforeSetRecordContainer
onBeforeShowWidget
onCatchAllEvents
onClickButtonGroup
onDestroyEvents
onDirtyStateChangeContainer
onElementCreatedWidget
onFocusInWidget
onFocusOutWidget
onHideWidget
onPaintWidget
onReadOnlyWidget
onRecomposeWidget
onResizeWidget
onShowWidget
onToggleButtonGroup
Typedefs
6
Typedefs
6AlignSpecWidget
BryntumListenerConfigEvents
CellWidgetContextWidget
ColorWidget
DelayableConfigDelayable
KeyMapConfigKeyMap