如何在 ion-datetime 对象中添加事件侦听器/ionChange 月份更改事件？

Question

当用户更改月份时，我需要重新渲染突出显示的日期：调用查询并检索该月的所有日期。 如果用户使用顶部按钮手动选择月份和年份，则它可以工作，但如果他只是单击箭头：“<" ">”，则不会触发 ionChange。

  <div class="calendar">
    <ion-datetime
      [(ngModel)]="selectedDate"
      presentation="date"
      locale="it-IT"
      [highlightedDates]="allAppointments"
      (ionChange)="createAppointmentList()"
    >
    </ion-datetime>

基本上，当用户单击日历的箭头时，我需要一个事件监听器

Answer 1

感谢 Misha Mashina 的评论，找到了解决方案

  initMonthObserver(){
    const monthText = document.querySelector('ion-datetime')?.shadowRoot?.querySelector('.calendar-header')?.querySelector('ion-label');
    const elementToObserve = document.querySelector('ion-datetime')?.shadowRoot?.querySelector('.calendar-body')

    if (elementToObserve) { 
      const observer = new MutationObserver((mutationsList, observer) => {

        this.monthString = monthText?.textContent;
        let parts = this.monthString.split(" ")
        let monthIndex = this.monthNames.indexOf(parts[0].toLowerCase())
        let monthNumber = monthIndex + 1
        let year = parts[1]

        if(this.monthString){
          this.monthToDate = new Date(year, monthNumber).toISOString()
          this.queryAppsPerMonth(this.monthToDate)
        }

      })
      const observerConfig = {
        childList: true, 
        subtree: true, 
      };
      observer.observe(elementToObserve, observerConfig)
    }
  }

使用以下方式获取日历元素：

 document.querySelector('ion-datetime')?.shadowRoot?.querySelector('.calendar-body')

然后 MutationObserver 来跟踪其突变

Answer 2

此解决方案假设初始月份是当前月份。

创建自定义组件。

@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.initNextMonthObserver();
    this.initPreviousMonthObserver();
  }

  initNextMonthObserver() {
    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);
  }

  initPreviousMonthObserver() {
    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);
  }

}

如您所见，我们还创建了一个观察者，就像上面的答案一样，但不同之处在于我们直接识别更改日历月份的按钮。

在 HTML 中，简单地输入：

<ion-datetime
  [presentation]="presentation"
  [firstDayOfWeek]="firstDayOfWeek"
>

</ion-datetime>

就这样吧。您可以听到输出

monthChange

属性的变化。