如何为ngx-bootstrap datepicker添加Today/Tomorrow按钮

确实，ngx-bootstrap官方文档里没有直接提供这两个内置按钮，但我们可以通过自定义弹出层模板+简单的组件逻辑来实现，步骤很清晰：

• 自定义弹出层模板
  我们可以利用ngx-bootstrap提供的bsDatepickerTemplate指令，重写弹出层的内容，在原有日历组件上方或下方添加自定义按钮。示例模板代码如下：

  <!-- 日期输入框 -->
  <input 
    type="text" 
    bsDatepicker 
    [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }" 
    #dp="bsDatepicker"
    [(ngModel)]="selectedDate"
  >
  
  <!-- 自定义弹出层模板 -->
  <ng-template #bsDatepickerTemplate let-datepicker>
    <!-- 自定义按钮区域 -->
    <div class="datepicker-custom-actions">
      <button class="btn btn-sm btn-outline-primary" (click)="pickToday(datepicker)">Today</button>
      <button class="btn btn-sm btn-outline-secondary ml-2" (click)="pickTomorrow(datepicker)">Tomorrow</button>
    </div>
    <!-- 保留原有的日历核心组件 -->
    <bs-datepicker-content [datepicker]="datepicker"></bs-datepicker-content>
  </ng-template>
  

  这里的关键是用ng-template绑定bsDatepickerTemplate，然后先放我们的自定义按钮，再引入原生的bs-datepicker-content，这样既保留了日历的原有功能，又添加了新按钮。

• 实现日期选择逻辑
  在组件的TypeScript文件里，编写两个方法来处理“今天”和“明天”的选择逻辑：

  import { Component } from '@angular/core';
  import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.css']
  })
  export class YourComponent {
    selectedDate: Date | undefined;
  
    pickToday(datepicker: BsDatepickerDirective): void {
      const today = new Date();
      // 设置选中日期
      datepicker.date = today;
      // 选完后关闭弹出层
      datepicker.hide();
    }
  
    pickTomorrow(datepicker: BsDatepickerDirective): void {
      const tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1);
      datepicker.date = tomorrow;
      datepicker.hide();
    }
  }
  

  这里我们直接操作Datepicker实例的date属性来设置选中日期，然后调用hide()方法关闭弹出层，不用手动同步表单值——如果用了ngModel或表单控件，这个值会自动同步。

• 可选：优化按钮样式
  可以加一点CSS让按钮区域更美观，比如：

  .datepicker-custom-actions {
    padding: 8px 15px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
  }
  

  这样按钮会靠右排列，和日历主体区分开，视觉效果更和谐。

• 注意事项

  • 确保你已经在模块中正确导入了BsDatepickerModule.forRoot()（根模块）或BsDatepickerModule（子模块）
  • 如果需要支持多语言，可以把按钮文本换成国际化变量，比如{{ 'today' | translate }}
  • 如果是在弹出式Datepicker（比如用bsDatepickerToggle）中使用，这个方案同样适用

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