Angular中如何实现点击按钮唤起datepicker并将选中日期填入输入框

根因说明 #

• 按钮的点击事件绑定语法错误：Angular 中组件方法的事件绑定需要用(click)语法，你写的原生click属性无法触发组件内定义的getReport方法。
• 唤起datepicker的目标对象错误：你项目中使用的是ngx-bootstrap的bsDatepicker，该指令绑定在input输入框上，而非按钮上，用jQuery选择按钮调用datepicker('show')自然无法生效。
• Angular项目不推荐混用jQuery操作第三方组件DOM，容易出现实例上下文不匹配的异常。

修复步骤 #

1. 给绑定了bsDatepicker的input标签添加模板引用变量，直接调用组件实例的show方法即可唤起日期选择器，无需引入jQuery。
2. 修正按钮的点击事件绑定语法。
3. 顺便修正bsConfig里的错误配置：selectFromOtherMonth需要传入布尔值true而非字符串'true'。

模板代码示例（无需额外写组件方法即可生效） #

<button type="button" class="btn btn-icon waves-effect waves-light btn-success" 
        (click)="datePicker.show()">
  <i class="fas fa-info-circle"></i>
</button>
            
<mat-form-field>
  <input matInput type="text" class="form-content" id="pickDate" placeholder="Date" 
         [(ngModel)]="selectedFromDate" 
         bsDatepicker 
         #datePicker="bsDatepicker"
         [ngModelOptions]="{standalone: true}"
         [bsConfig]="{ isAnimated: true,adaptivePosition: true,containerClass:'theme-red',dateInputFormat: 'MM/DD/YYYY', selectFromOtherMonth: true}"
         (ngModelChange)="setFromDate($event)" 
         required 
         autocomplete="off">                 
</mat-form-field>

若要保留原有getReport方法，可按如下方式修改TS代码 #

import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker';

export class YourComponent {
  @ViewChild('datePicker') datePicker!: BsDatepickerDirective;
  selectedFromDate: Date = new Date();

  async getReport() {
    this.datePicker.show();
  }

  setFromDate(date: Date) {
    // 原有逻辑不变
  }
}

你已经通过[(ngModel)]双向绑定了selectedFromDate变量，只要日期选择器正常唤起，选中日期后输入框会自动填充选中值，无需额外开发。

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