如何实现点击触发Angular Bootstrap范围日期选择器？

嘿，我来帮你搞定这个需求！Angular Bootstrap其实自带了范围日期选择器的功能，只需要对现有代码做几个关键调整就行，具体步骤如下：

1. 调整模板代码 #

你需要把普通日期选择器的指令替换成范围版的，同时绑定范围日期的模型，还要更新模板引用变量的关联：

修改后的模板代码：

<input 
  class="form-control" 
  placeholder="选择日期范围" 
  name="dpRange" 
  [(ngModel)]="dateRange"
  [displayMonths]="displayMonths" 
  [navigation]="navigation" 
  ngbDatepickerRange 
  #d="ngbDatepickerRange"
>
<div class="input-group-append">
  <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </button>
</div>

2. 在组件类中配置范围变量 #

接下来要在你的组件.ts文件里定义存储日期范围的变量，同时导入必要的类型：

import { Component } from '@angular/core';
import { NgbDateRange, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent {
  // 定义日期范围变量，初始可以为空或者设置默认值
  dateRange: NgbDateRange = { start: null, end: null };
  
  // 保留你原来的配置项（如果需要的话）
  displayMonths = 1;
  navigation = 'select'; // 可选值还有'arrow'等
}

关键修改点说明 #

• 把ngbDatepicker指令换成ngbDatepickerRange，这是范围选择器的专属指令
• 模板引用变量#d="ngbDatepicker"要改成#d="ngbDatepickerRange"，确保和指令匹配
• 用[(ngModel)]="dateRange"绑定范围模型，NgbDateRange是一个包含start和end属性的对象，分别存储起始和结束日期（类型为NgbDateStruct）
• 原来的displayMonths、navigation等配置属性可以继续使用，不会影响范围选择器的功能

这样修改后，点击日历按钮就能打开范围日期选择器，用户可以自由选择起始和结束日期啦！

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