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

Question

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

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

提前致谢。

Answer 1

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

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

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

然后将自定义元素添加到日期选择器:

<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;
}

Here is a running stackblitz demo.

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