Issue with Date Range Selection and Independent Year selection for Two Calendars in svelte js

Parth Shah — Thu, 27 Jun 2024 04:31:27 +0000

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); }

the 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

DEV Community: Parth Shah

Issue with Date Range Selection and Independent Year selection for Two Calendars in svelte js