Datepicker的'readonly'属性在bsDatepicker中失效问题求助

从ngx-bootstrap 12版本开始，bsDatepicker组件的readonly属性无法正常生效，常规的属性绑定等设置方式都不起作用。这里提供几个可行的替代方案：

• 使用disabled属性配合样式模拟readonly效果：
  如果不需要完全阻止组件交互只是要禁止手动输入，可以设置[disabled]="true"，再通过CSS移除禁用状态的灰化样式：

  :host ::ng-deep .bs-datepicker-input:disabled {
    background-color: #fff;
    cursor: default;
  }
  

  这样既保留了日期选择器的视觉样式，又能禁止用户手动输入和选择操作。

• 自定义指令控制输入与交互：
  编写一个自定义指令，监听输入框的keydown事件阻止输入，同时禁用日期选择器的弹出：

  import { Directive, ElementRef, HostListener } from '@angular/core';
  import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
  
  @Directive({
    selector: '[appDatepickerReadonly]'
  })
  export class DatepickerReadonlyDirective {
    constructor(private el: ElementRef, private datepicker: BsDatepickerDirective) {}
  
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
      event.preventDefault();
    }
  
    @HostListener('click')
    onClick() {
      this.datepicker.hide();
    }
  }
  

  使用时给bsDatepicker所在的输入框添加指令：

  <input type="text" bsDatepicker appDatepickerReadonly>
  

• 利用readonly属性结合原生输入框控制：
  给输入框添加原生readonly属性的同时，通过bsConfig配置配合CSS阻止弹出层触发：

  <input type="text" bsDatepicker readonly [bsConfig]="{ containerClass: 'readonly-datepicker' }">
  

  对应的CSS：

  .readonly-datepicker {
    pointer-events: none;
  }
  

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