Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

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

$
0
0

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


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>