This particular approach assumes that the starting month is the one currently displayed.
To implement this, you would need to create a customized component as shown below:
@Component({
selector: 'app-custom-datetime',
templateUrl: './custom-datetime.component.html',
styleUrls: ['./custom-datetime.component.scss'],
})
export class CustomDatetimeComponent implements OnInit {
@Input() presentation: string = 'date';
@Input() firstDayOfWeek: number = 0;
@Output() monthChange: EventEmitter<{ month: number }> = new EventEmitter();
private month: number = new Date().getMonth();
ngOnInit(): void {
}
ngAfterViewInit() {
this.createNextMonthObserver();
this.createPreviousMonthObserver();
}
createNextMonthObserver() {
const interval = setInterval(() => {
const ionDatetime = document.querySelector('ion-datetime');
const ionButtons = ionDatetime?.shadowRoot?.querySelectorAll('ion-button');
if (ionButtons?.length === 2) {
ionButtons[1].addEventListener('click', () => {
this.month = this.month === 11 ? 0 : this.month + 1;
this.monthChange.emit({ month: this.month });
});
clearInterval(interval);
}
}, 100);
}
createPreviousMonthObserver() {
const interval = setInterval(() => {
const ionDatetime = document.querySelector('ion-datetime');
const ionButtons = ionDatetime?.shadowRoot?.querySelectorAll('ion-button');
if (ionButtons?.length === 2) {
ionButtons[0].addEventListener('click', () => {
this.month = this.month === 0 ? 11 : this.month - 1;
this.monthChange.emit({ month: this.month });
});
clearInterval(interval);
}, 100);
}
}
With this setup, we have established direct observers for the button interactions that modify the calendar's month.
Included in your HTML code should be the following snippet:
<ion-datetime
[presentation]="presentation"
[firstDayOfWeek]="firstDayOfWeek"
>
</ion-datetime>
By doing this, you are able to monitor any changes through the monthChange output property.