能否为owl-date-time-picker及其中禁用日期添加点击事件？

一、给组件本身添加点击事件 #

直接在<owl-date-time>元素上绑定(click)事件即可，若直接绑定无效果，可尝试阻止事件冒泡避免组件内部拦截：

修改你的模板代码：

<owl-date-time #datePicker [pickerMode]="pickerMode" [pickerType]="pickerType" (click)="onPickerClicked($event)"></owl-date-time>

组件类中实现对应方法：

onPickerClicked(event: MouseEvent) {
  event.stopPropagation();
  // 这里编写组件点击后的逻辑
  console.log("picker区域被点击");
}

如果需要监听弹窗的显示/隐藏，也可以用组件自带的(opened)或(closed)事件来处理交互。

二、给禁用日期添加点击事件 #

禁用日期默认会被组件拦截点击响应，推荐用事件委托实现：

1. 先通过ViewChild获取picker实例：

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

// ...

@ViewChild('datePicker') datePicker!: ElementRef;

ngAfterViewInit() {
  const pickerContainer = this.datePicker.nativeElement.querySelector('.owl-dt-container');
  pickerContainer.addEventListener('click', (event: MouseEvent) => {
    const target = event.target as HTMLElement;
    // 禁用日期的类名通常为owl-dt-calendar-cell-disabled，可根据实际DOM结构调整
    if (target.closest('.owl-dt-calendar-cell-disabled')) {
      // 处理禁用日期的点击逻辑
      const clickedDate = target.textContent?.trim();
      console.log(`禁用日期${clickedDate}被点击`);
    }
  });
}

注意：组件版本不同，禁用日期的类名可能有变化，建议通过浏览器开发者工具查看实际DOM元素的类名后调整判断条件。

内容的提问来源于stack exchange，提问作者Nikoloz