This content originally appeared on DEV Community and was authored by Parth Shah
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
This content originally appeared on DEV Community and was authored by Parth Shah
Parth Shah | Sciencx (2024-06-27T04:31:27+00:00) Issue with Date Range Selection and Independent Year selection for Two Calendars in svelte js. Retrieved from https://www.scien.cx/2024/06/27/issue-with-date-range-selection-and-independent-year-selection-for-two-calendars-in-svelte-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.