I am using Flatpickr in svelte for date range selection in my project and encountered a specific issue regarding the Independent Year selection for two calendars. Currently, when I change the year for one calendar, it changes the year for a second calendar as well. This behavior is not desirable as I need both calendars to update their years independently.

Expected Behavior:

Independent Year Updates: Each calendar should allow independent updates to the year without affecting the other calendar.
I want to select a range for more than one year like from 2015 to 2018.

the change year function

const changeYear = (event: Event, index: number) => {
    if (calendarInstance) {
      const newYear = parseInt((event.target as HTMLSelectElement).value, 10);
      const currentMonth = (calendarInstance.currentMonth + index) % 12;
      calendarInstance.setDate(new Date(newYear, currentMonth, 1), false);
      updateDropdowns(calendarInstance);
    }
t

he flatepikcer set-up

const setupFlatpickr = () => {
    if (typeof window !== 'undefined') {
      const options = {
        mode: 'range',
        showMonths: 2,
        prevMonthDayClass: 'prevMonthDay not-active',
        defaultDate: [new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), new Date()],
        nextMonthDayClass: 'nextMonthDay not-active',
        dateFormat: 'Y-m-d',
        onChange: (selectedDates: Date[], dateStr: string, instance: FlatpickrInstance) => {
          startDate = selectedDates[0];
          endDate = selectedDates[1];
          updateSelectedRangeDisplay();
        },
        onReady: (selectedDates: Date[], dateStr: string, instance: FlatpickrInstance) => {
          calendarInstance = instance;
          insertCustomDropdowns(instance);
          preselectDropdowns(instance);
        },
        onMonthChange: (selectedDates: Date[], dateStr: string, instance: FlatpickrInstance) => {
          updateDropdowns(instance);
        },
        onYearChange: (selectedDates: Date[], dateStr: string, instance: FlatpickrInstance) => {
          updateDropdowns(instance);
        },
        onClose: () => {
          // Handle close event if needed
          isApplied.set(false);
          isCancelled.set(false);
        }
        // Other options as needed
      };

      flatpickr('#dateRangePicker', options);
    }
  };

Any Help Would Be Appreciated:

Your assistance in resolving this issue or providing guidance on how to achieve independent year updates for two Flatpickr calendars would be greatly appreciated. Thank you!

Git Issue Link:https://github.com/flatpickr/flatpickr/issues/3025

I’m trying to selecet date range for more then 1 year in svelet js I’m using flate Date picker as of now i’m only abel to selecet range for 1 year