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