YearPicker
A Panel subclass which allows a year to be selected from a range of 12 displayed years.
The panel can be configured with startYear to specify the first year in the displayed range.
The year indicates and sets the currently selected year.
The select event is fired when a new year is selected.
Year picker
//<code-header>
fiddle.title = 'Year picker';
//</code-header>
const picker = new YearPicker({
appendTo : targetElement,
tbar : {
items : {
// Move the title to the centre
title : {
weight : 250
}
}
},
width : '24em',
onChange : ({ value }) => {
Toast.show(`You picked ${value}`);
}
});Configs
113
Configs
113Common
listenersEvents
Other
maxYear: Number
The highest year to allow.
minYear: Number
The lowest year to allow.
The year to show at the start of the widget
The definition of the top toolbar which displays the title and "previous" and "next" buttons.
This contains the following predefined items which may be reconfigured by
application code:
titleA widget which displays the visible year range. Weight 100.previousA button which navigates to the previous block. Weight 200.nextA button which navigates to the next block. Weight 300.
These may be reordered:
new YearPicker({
appendTo : targetElement,
tbar : {
items : {
// Move title to centre
title : {
weight : 250
}
}
},
width : '24em'
});
The year to use as the selected year. Defaults to the current year.
The number of clickable year buttons to display in the widget.
It may be useful to change this if a non-standard shape or size is used.
callOnFunctionsWidget
columnWidget
defaultFocusContainer
drawerPanel
inputFieldAlignContainer
labelPositionContainer
renditionContainer
rtlRTL
spanWidget
Content
bbarPanel
defaultsContainer
footerPanel
headerPanel
itemsContainer
lazyItemsContainer
namedItemsContainer
stripsPanel
textContentContainer
toolsPanel
trapFocusPanel
CSS
bodyClsPanel
borderContainer
clsWidget
colorWidget
contentElementClsWidget
htmlClsWidget
itemClsContainer
styleWidget
uiPanel
DOM
adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
tagWidget
Float & align
alignWidget
anchorWidget
centeredWidget
constrainToWidget
draggableWidget
floatingWidget
hideAnimationWidget
maximizeOnMobileWidget
positionedWidget
scrollActionWidget
showAnimationWidget
xWidget
yWidget
Layout
alignSelfWidget
collapsedPanel
collapsiblePanel
dockWidget
flexWidget
heightWidget
hiddenWidget
hideWhenEmptyContainer
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget
misc
tabBarItemsContainer
Misc
bubbleEventsEvents
dataFieldWidget
defaultBindPropertyWidget
disabledWidget
elementAttributesWidget
iconPanel
ignoreParentReadOnlyWidget
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
maskDefaultsWidget
maskedWidget
monitorResizeWidget
ownerWidget
preventTooltipOnTouchWidget
readOnlyWidget
refWidget
rippleWidget
rootElementWidget
showTooltipWhenDisabledWidget
tabWidget
titlePanel
tooltipWidget
Scrolling
scrollableWidget
Properties
98
Properties
98Class hierarchy
Identifies an object as an instance of YearPicker class, or subclass thereof.
Identifies an object as an instance of YearPicker class, or subclass thereof.
isContainerContainer
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isPanelPanel
isRTLRTL
isStateState
isToolableToolable
isWidgetWidget
Other
The ending year displayed in the widget.
The starting year displayed in the widget.
value: Number
The currently selected year.
The currently selected year.
columnWidget
firstItemContainer
hasChangesContainer
inputFieldAlignContainer
isSettingValuesContainer
isStatefulState
isValidContainer
itemsContainer
labelPositionContainer
lastItemContainer
renditionContainer
rtlRTL
spanWidget
toolsPanel
valuesContainer
CSS
clsWidget
DOM
appendToWidget
contentWidget
contentElementWidget
datasetWidget
elementWidget
focusableElementWidget
focusElementWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
overflowElementWidget
styleWidget
Layout
alignSelfWidget
collapsedPanel
collapsingPanel
expandingPanel
flexWidget
heightWidget
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
scrollableWidget
widthWidget
Misc
callOnFunctionsEvents
cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
titlePanel
tooltipWidget
State
stateState
Widget hierarchy
containsFocusWidget
nextSiblingWidget
ownerWidget
parentWidget
previousSiblingWidget
visibleChildCountContainer
widgetMapContainer
Functions
74
Functions
74Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
resolveCallbackBase
toggleCollapsedPanel
updateLocalizationLocalizable
Other
addContainer
addListenerEvents
announceAriaLiveWidget
collapsePanelPanel
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
exitFullscreenWidget
expandPanelPanel
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
22
Events
22Fired when a year is selected.
// Adding a listener using the "on" method
yearPicker.on('select', ({ value, source }) => {
});| Parameter | Type | Description |
|---|---|---|
value | Number | The previously selected year. |
source | YearPicker | This YearPicker |
beforeDestroyEvents
beforeHideWidget
beforeSetRecordContainer
beforeShowWidget
beforeStateApplyState
beforeStateSaveState
catchAllEvents
collapsePanel
destroyEvents
dirtyStateChangeContainer
elementCreatedWidget
expandPanel
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget
toolClickPanel
Event handlers
22
Event handlers
22Called when a year is selected.
new YearPicker({
onSelect({ value, source }) {
}
});| Parameter | Type | Description |
|---|---|---|
value | Number | The previously selected year. |
source | YearPicker | This YearPicker |
onBeforeDestroyEvents
onBeforeHideWidget
onBeforeSetRecordContainer
onBeforeShowWidget
onBeforeStateApplyState
onBeforeStateSaveState
onCatchAllEvents
onCollapsePanel
onDestroyEvents
onDirtyStateChangeContainer
onElementCreatedWidget
onExpandPanel
onFocusInWidget
onFocusOutWidget
onHideWidget
onPaintWidget
onReadOnlyWidget
onRecomposeWidget
onResizeWidget
onShowWidget
onToolClickPanel
Typedefs
7
Typedefs
7AlignSpecWidget
BryntumListenerConfigEvents
CellWidgetContextWidget
ColorWidget
DelayableConfigDelayable
KeyMapConfigKeyMap
PanelHeaderPanel
CSS variables
60
CSS variables
60| Name | Description |
|---|---|
--b-year-picker-gap | Gap between the years in the year picker, and months in the month picker. |
--b-year-picker-padding | Padding inside the year picker and the month picker. |
--b-year-picker-title-font-weight | Font weight for the title of the year picker and the month picker |
--b-year-picker-year-font-weight | Font weight for the years in the year picker and the months in the month picker |
--b-year-picker-year-color | Color for the years in the year picker and the months in the month picker |
| Hovered | |
--b-year-picker-hover-background | Background for the hovered year in the year picker and the hovered month in the month picker |
| Selected | |
--b-year-picker-selected-background | Background for the selected year in the year picker and the selected month in the month picker |
--b-year-picker-selected-color | Color for the selected year in the year picker and the selected month in the month picker |