YearPicker
Widget

A panel that displays a grid of 12 years and lets the user pick one. Navigate between year ranges using the built-in previous/next buttons in the toolbar. The startYear config sets the first year of the displayed range, and the year property reflects the current selection. The select event fires when the user picks a year.

const yearPicker = new YearPicker({
    year     : 2025,
    appendTo : document.body,
    onSelect({ value }) {
        console.log('Selected year:', value);
    }
});

Useful configs and events

Config / Event	Description
startYear	First year displayed in the 12-year range
year	The initially selected year
tbar	Top toolbar with navigation buttons and title
select	Fired when a year is selected

Configs

Configs are options you supply in a configuration object when creating an instance of this class

maxYear : Number

The highest year to allow.
minYear : Number

The lowest year to allow.
startYear : Number

The year to show at the start of the widget

Has a corresponding runtime startYear property.
tbar : ToolbarConfig
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:
- title A widget which displays the visible year range. Weight 100.
- previous A button which navigates to the previous block. Weight 200.
- next A 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'
});
```
year : Number

The year to use as the selected year. Defaults to the current year.

Has a corresponding runtime year property.
yearButtonCount : Number12

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.

Properties

Properties are getters/setters or publicly accessible variables on this class

isYearPicker : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of YearPicker class, or subclass thereof.

endYear : Number

READONLY

The ending year displayed in the widget.
startYear : Number

The starting year displayed in the widget.

Has a corresponding startYear config.
value : Number

The currently selected year.
year : Number

The currently selected year.

Has a corresponding year config.
isYearPicker : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of YearPicker class, or subclass thereof.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

select

Fired when a year is selected.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onSelect

Called when a year is selected.

CSS variables

CSS variables that can be set to adjust appearance

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-color	Color for the years in the year picker and the months in 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
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

YearPicker
Widget

Useful configs and events

See also

Configs

Properties

Events

Event handlers

CSS variables

Source path

Inheritance tree5

Mixins7

Contents

YearPicker Widget

Useful configs and events

See also

Configs

Properties

Events

Event handlers

CSS variables

Source path

Inheritance tree5

Mixins7

Contents

YearPicker
Widget