如何自定义 ngx-bootstrap 日期选择器

Question

我想自定义 ngx-bootstrap datepicker 弹出窗口。基本上我想在显示日期的日历中添加链接/按钮，点击该日期将被添加到日期选择器字段。

我找不到任何自定义日期选择器的方法。我正在使用 Angular 5 和 ngx-bootstrap：https ://valor-software.com/ngx-bootstrap/#/datepicker

提前致谢。

Answer 1

您可以基于原始日期选择器创建一个自定义组件，将自定义元素添加到模板中，使其看起来像一个带有一些 css 的集成元素：

首先更改日期选择器弹出窗口的高度：

::ng-deep.bs-datepicker {
  height: 350px;
}

然后将自定义元素添加到 datepicker ：

<div class="container">
    <input type="text" #dp="bsDatepicker" bsDatepicker [(bsValue)]="myDateValue">
    <div class="custom-content" *ngIf="dp.isOpen">
        <a (click)="customAction()">{{myDateValue | date:'short'}}</a>
    </div>
</div>

用一些 css ：

.custom-content {
  position: absolute;
  z-index: 1081;
  top: 390px;
  cursor: pointer;
  align-self: center;
}

这是一个正在运行的 stackblitz 演示。

更好的解决方案是有可能将模板传递给日期选择器，但 ngx-bootstrap 似乎不支持。