swiper.update() triggers slideChange unexpectedly — how to prevent or handle it?

I'm building a custom datepicker component using Swiper.js in an Angular project. The component includes three Swiper instances for year, month, and day selection.

The month list is dynamically updated when the year changes. For example, if minDate is set to 2024/06/05, selecting year 2024 updates the months list to [6,7,8,9,10,11]. After updating the list, I call monthSwiper.update().

However, calling update() unexpectedly triggers the slideChange event on the month Swiper. Since the new months list differs in length or index positions, this causes the activeIndex to point to a different value than before, leading to incorrect assignment:

slideChange: (swiper) => {
this.currentDate.month = this.months[swiper.activeIndex] - 1;
}


This results in the wrong month being set.

Is it expected that swiper.update() triggers the slideChange event? If so, is there any best practices to prevent the wrong update?

Continue reading...