No event for ion-datetime arrows makes highlightdates useless?

Ionic Framework
1

I wanted to implement highlighted dates on the ion-datetime but there doesn’t seem to be events for the arrows in the top right.

Am I missing something? I’ve tried binding (ionChange) and (ngModelChange) to try to capture it.

Events are triggered if you use the top left month/year selector, or click on a date, but nothing for the < > arrows in the top right.

Can’t find any documentation for it either. That means I would need to load in the entire history of the data set to use the highlighted dates functionality?

Looking at the source code I can’t find any hints of what may be triggered, the closest I could find is the handler for the next button, which doesn’t seem to fire any events:

Although I acknowledge this might not be the full picture, as I don’t know if calendar.scrollTo may trigger things. I was trying to use GitHub to track this down but scrollTo seemed to be a dead end in its browsing.

I did find reference to it only loading the calendar for 3 months (last current next) but not what event it might load more from.

Can anyone either point me in the right direction, or confirm that this

2

Hi, I encountered similar problem. I tried to deal with it like this:

  useIonViewDidEnter(() => {
    const calendarHeader = document
      .querySelector('ion-datetime')
      ?.shadowRoot?.querySelector('.calendar-next-prev')
      ?.querySelectorAll('ion-button');
    if (calendarHeader && calendarHeader.length > 1) {
      calendarHeader[0].addEventListener('click', prevMonthDate);
      calendarHeader[1].addEventListener('click', nextMonthDate);
    }
  });

  const prevMonthDate = useCallback(() => {
    setSelectDateValue((prevDate) => prevDate.minus({ months: 1 }));
  }, []);

  const nextMonthDate = useCallback(() => {
    setSelectDateValue((prevDate) => {
      const date = prevDate.plus({ months: 1 });
      return date.millisecond > currentDate.millisecond ? currentDate : date;
    });
  }, [currentDate]);