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
Top comments (1)
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.