ngx-daterangepicker-material日历图标点击不触发及按钮颜色修改问题

问题1：点击FontAwesome日历图标无法唤起日历菜单 #

原因分析 #

模板引用变量绑定错误，导致pickerDirective未正确关联日期选择器指令；同时FontAwesome图标可能阻止点击事件冒泡到外层按钮，使得openDatepicker()方法未触发。

修复步骤 #

1. 修正模板引用变量：
   在input元素上添加#pickerDirective模板引用（注意#号），替换原有的pickerDirective属性：

   <input type="text" ngxDaterangepickerMd 
          placeholder="DD/MM/YYYY" 
          [showDropdowns]="datepickerConfig.showDropdowns"
          [showWeekNumbers]="datepickerConfig.showWeekNumbers"
          [locale]="{applyLabel: 'Apply', format: 'DD-MM-YYYY'}" 
          #pickerDirective
          name="daterange"
          [(ngModel)]="selected" [showCancel]="true" 
          class="form-control datePicker-form"
          readonly >
   

2. 调整组件类中的引用：
   将@ViewChild参数改为带引号的模板引用变量名：

   import { DaterangepickerDirective } from 'ngx-daterangepicker-material';
   @ViewChild('pickerDirective', { static: false })
   pickerDirective!: DaterangepickerDirective;
   
   openDatepicker() {
     this.pickerDirective.open();
     console.log("Triggered");
   }
   

3. 确保图标点击事件正常触发：
   将点击事件直接绑定到图标上，同时阻止事件冒泡：

   <span class="btn calendar d-flex align-items-center ngx-daterangepicker-action"
         type="button">
     <fa-icon [icon]="faCalendarAlt" (click)="openDatepicker(); $event.stopPropagation()"></fa-icon>
   </span>
   

问题2：修改日历菜单内Apply和Close按钮的颜色 #

修复方法 #

由于组件样式封装，需使用::ng-deep穿透样式（或在全局样式文件中修改）：

1. 组件内CSS修改：

   /* 修改Apply按钮颜色 */
   ::ng-deep .ngx-daterangepicker-action-buttons .btn-apply {
     background-color: #28a745;
     color: #ffffff;
     border-color: #28a745;
   }
   
   /* 修改Close按钮颜色 */
   ::ng-deep .ngx-daterangepicker-action-buttons .btn-cancel {
     background-color: #dc3545;
     color: #ffffff;
     border-color: #dc3545;
   }
   

2. 全局样式文件（如styles.css）修改：
   无需::ng-deep，直接写入样式：

   .ngx-daterangepicker-action-buttons .btn-apply {
     background-color: #28a745;
     color: #ffffff;
     border-color: #28a745;
   }
   
   .ngx-daterangepicker-action-buttons .btn-cancel {
     background-color: #dc3545;
     color: #ffffff;
     border-color: #dc3545;
   }
   

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