如何在ng-bootstrap内嵌日历中添加选中/当前日期图标？

云原生阿岚

2026-7-31

ng-bootstrap 内嵌日历显示当前日期图标问题解决思路

确认版本与基础配置
先检查package.json中@ng-bootstrap/ng-bootstrap的版本，建议使用最新稳定分支；同时确认模块中已正确导入NgbDatepickerModule，无配置遗漏。
排查样式覆盖问题
ng-bootstrap默认会给当前日期添加ngb-datepicker-day-current类，可能你的全局/组件样式覆盖了该类的默认样式，导致标识不显示。通过浏览器开发者工具定位当前日期DOM元素，查看该类是否存在、样式是否被覆盖。若存在覆盖，可手动添加自定义样式：
```
.ngb-datepicker-day.current .ngb-datepicker-day-number::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #007bff;
}
```
若使用SCSS，也可通过ng-bootstrap内置变量$ngb-datepicker-current-day-indicator-color直接定制标识颜色。

自定义日期单元格模板
若默认样式无法生效，可通过自定义模板手动实现当前日期标识：

<ngb-datepicker #dp [(ngModel)]="selectedDate" [displayMonths]="1">
  <ng-template ngbDatepickerDay let-date let-current="current">
    <span class="custom-day" [class.current-day]="current">
      {{ date.day }}
      <span *ngIf="current" class="current-indicator"></span>
    </span>
  </ng-template>
</ngb-datepicker>

搭配对应CSS：

.custom-day {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
}
.current-indicator {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #007bff;
}