How to add event listener/ionChange on month change event in an ion-datetime object?

If you are working with TypeScript and using the ion-datetime component in Ionic, you may come across a situation where you need to add an event listener or ionChange event specifically for when the month changes in the datetime picker. In this blog post, we will explore two solutions to achieve this.

Solution 1: Using ionChange event with a custom handler

The ion-datetime component in Ionic provides an ionChange event that is triggered whenever the value of the datetime picker changes. We can utilize this event and create a custom handler to detect the month change event.
Here’s an example code snippet:


import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    
    
  `
})
export class MyComponent {
  onDateChange(event: CustomEvent) {
    const selectedDate = new Date(event.detail.value);
    const selectedMonth = selectedDate.getMonth() + 1;
    console.log('Selected month:', selectedMonth);
  }
}

In this example, we have an ion-datetime component with display-format and picker-format set to “MM/YYYY”. The ionChange event is bound to the onDateChange method, which is triggered whenever the value of the datetime picker changes.
Inside the onDateChange method, we retrieve the selected date from the event object and extract the month using the getMonth() method. We add 1 to the month value since it is zero-based.
You can replace the console.log statement with your desired logic to handle the month change event.

Solution 2: Using JavaScript’s native addEventListener

If you prefer using JavaScript’s native addEventListener method instead of the ionChange event, you can achieve the same result by targeting the datetime picker element in the DOM.
Here’s an example code snippet:


import { Component, AfterViewInit, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    
    
  `
})
export class MyComponent implements AfterViewInit {
  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    const datetimePicker = this.elementRef.nativeElement.querySelector('ion-datetime');
    datetimePicker.addEventListener('ionPickerColChange', (event: CustomEvent) => {
      const selectedDate = new Date(event.detail.value);
      const selectedMonth = selectedDate.getMonth() + 1;
      console.log('Selected month:', selectedMonth);
    });
  }
}

In this example, we use the AfterViewInit lifecycle hook to ensure that the DOM element for the datetime picker is available before we try to add the event listener.
We use the elementRef property to access the native element of the component, and then use querySelector to target the ion-datetime element.
We add an event listener for the ionPickerColChange event, which is triggered whenever the column of the datetime picker changes. Inside the event listener, we extract the selected date and month in the same way as in the previous solution.
Remember to replace the console.log statement with your desired logic to handle the month change event.
These are the two solutions to add event listener/ionChange on month change event in an ion-datetime object. Choose the one that suits your needs and implement it in your TypeScript code.

How to add event listener/ionChange on month change event in an ion-datetime object?