咨询：能否为bsDatepicker添加今日按钮，点击重置为当日日期

当然可以！给ngx-bootstrap的bsDatepicker加个「今日」按钮其实超简单，我给你两种方案，按需选择就行：

方案一：用配置项快速启用（推荐） #

ngx-bootstrap的datepicker本身就自带了「今日」按钮的配置，只需要简单设置就能启用：

1. 在你的组件类里定义配置对象：

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

// 其他组件代码...

// 配置datepicker参数
bsConfig: Partial<BsDatepickerConfig> = {
  showTodayButton: true, // 开启「今日」按钮
  todayButtonLabel: '今日', // 把按钮文本改成「今日」
  todayHighlight: true // 可选：自动高亮当日日期
};

2. 然后在模板里把配置绑定到datepicker上：

<input type="text" bsDatepicker [bsConfig]="bsConfig" [(ngModel)]="selectedDate">

这样设置后，日历面板底部会自动出现「今日」按钮，点击就能直接选中当天日期，完全不用自己写额外的逻辑～

方案二：自定义模板实现个性化按钮 #

如果默认的按钮样式或位置不符合你的需求，也可以自己写模板定制：

1. 先在模板里自定义日历的底部区域：

<input type="text" bsDatepicker #dp="bsDatepicker" [(ngModel)]="selectedDate">

<!-- 自定义日历面板 -->
<bs-datepicker-container *ngIf="dp.isOpen">
  <bs-datepicker [bsConfig]="bsConfig">
    <!-- 自定义底部按钮区域 -->
    <ng-template #customFooter>
      <button class="btn btn-sm btn-primary" (click)="selectToday(dp)">今日</button>
    </ng-template>
  </bs-datepicker>
</bs-datepicker-container>

2. 然后在组件类里实现「今日」按钮的点击逻辑：

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

// 其他组件代码...

selectToday(datepicker: BsDatepickerDirective): void {
  this.selectedDate = new Date(); // 选中当日日期
  datepicker.hide(); // 可选：点击后自动关闭日历面板
}

这种方式你可以随便调整按钮的样式、位置，甚至加一些额外的交互逻辑，灵活性更高～

小提示 #

• 确保你的ngx-bootstrap是较新版本，旧版本可能没有showTodayButton这类配置项，必要的话可以升级一下
• 如果用的是响应式表单，把模板里的[(ngModel)]换成formControlName或者formControl就可以正常使用啦

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