DEV Community

Cover image for Issue with Date Range Selection and Independent Year selection for Two Calendars in svelte js
Parth Shah
Parth Shah

Posted on

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

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

What's the purpose of this post? The project is clearly abandoned. I wouldn't have bothered to open an issue after seeing over 600 open issues nobody is looking at.