MultipleDatePicker：如何在下拉框中显示1960-2028固定年份范围？

Hey there! Nice work getting the calendar to jump to your last selected year/month—let's lock that year dropdown into the 1960-2028 range so it stops shifting around the selected year.

The default behavior uses relative props like change-year-past and change-year-future to center the dropdown on whatever year you pick, which is exactly what we need to override. Here's how to make it happen:

Step 1: Generate a Fixed Year Array #

Instead of letting the component calculate a relative range, we'll create a static list of years from 1960 to 2028. The exact implementation depends on how you're using the picker, but here are common scenarios:

For Vue Implementation #

1. Add a computed property to generate your fixed year list:

computed: {
  fixedYears() {
    const yearList = [];
    for (let year = 1960; year <= 2028; year++) {
      yearList.push(year);
    }
    return yearList;
  }
}

2. Pass this array to the picker component, replacing the relative year props:

<multiple-date-picker :years="fixedYears" ...your-other-props />

For Vanilla JS Implementation #

1. Generate the year range and pass it during initialization:

const fixedYearRange = [];
for (let year = 1960; year <= 2028; year++) {
  fixedYearRange.push(year);
}

new MultipleDatePicker({
  // Keep your existing config here
  years: fixedYearRange,
  // Remove change-year-past and change-year-future from options
});

Step 2: Remove Relative Year Props #

Make sure to delete any references to change-year-past and change-year-future from your component setup. These are the props that trigger the dynamic "center on selected year" behavior, so removing them will prevent the dropdown from shifting.

Step 3: Test the Behavior #

After making these changes, select different years in the picker—your dropdown should stay fixed to 1960-2028 no matter what, while your existing "jump to last selected year/month" functionality keeps working as expected.

If the component doesn't accept a direct years prop, you might need to override its internal year-range generation method. Look for a function like generateYearRange in the component's source code and replace its logic with your fixed array.

内容的提问来源于stack exchange，提问作者Usman Iqbal