Years configuration

The years configuration governs the behavior and appearance of the years picker.

Here's its interface:

interface DPYearsConfig {
  mode: 'decade' | 'fluid';
  numberOfYears: number;
  step: number;
}

interface DPYearsConfig {
  mode: 'decade' | 'fluid';
  numberOfYears: number;
  step: number;
}

mode

The mode option determines how the current year will be centered inside the years matrix.

For the decade value, it calculates the current decade (e.g., for 2022, it represents 2020-2029) and adds the end of the previous decade and the start of the next decade.

2019 2020 2021
2022 2023 2024
2025 2026 2027
2028 2029 2030

2019 2020 2021
2022 2023 2024
2025 2026 2027
2028 2029 2030

In fluid mode, the years place the current year in the middle of the list, but offset by -1.

2017 2018 2019
2020 2021 2022
2023 2024 2025
2026 2027 2028

2017 2018 2019
2020 2021 2022
2023 2024 2025
2026 2027 2028

In exact mode, the current year is placed at the end of the list.

2012 2013 2014
2015 2016 2017
2018 2019 2020
2021 2022 2023

2012 2013 2014
2015 2016 2017
2018 2019 2020
2021 2022 2023

numberOfYears

The numberOfYears property determines the quantity of years displayed in the years matrix, with a default value set at 12.

step

The step property specifies the number of years that the previousYearsButton and nextYearsButton prop-getters will change by on a single step.