How can I catch the Material Datepicker month pagination event?

Question

I would like to catch the event that comes from the month \"left\" and \"right\" selection buttons, but I couldn\'t find any documentation about it.

What ev

Answer 1

on the Template where:

add an event listener when the datepicker is open and add to the buttons the click event...

TS:

initEvents(): void {
setTimeout(() => {
  const prev = document.querySelector('.mat-calendar-previous-button');
  const next = document.querySelector('.mat-calendar-next-button');
  prev.addEventListener('click', () => { // Previous Button
    console.log('Prev');
  });
  next.addEventListener('click', () => { // Next Button
    console.log('Prev');
  });

}, 150);

}

Hope it works :)

without the small delay, it will display u a null reference, anyway with the small delay it should work well, in any way there's a delay when the user clicks on that datepicker by the animation so..

btw: it displays null because the event occurs before the element (our buttons) are in the DOM...

EDIT: one more thing am this solution may not the best because ur register events every time the datepicker is opened, but its the best and the fastest way which i found, an a better way of doing that is by creating a custom header... but its a lot of codes to write.., u can check it on official docs if u want.