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

Question

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

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

谢谢。

Answer 1

您可以基于原始datepicker创建一个自定义组件，将自定义元素添加到模板中，使其看起来像是带有某些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;
}

Here is a running stackblitz demo.

一个更好的解决方案是可以将模板传递给datepicker，但是ngx-bootstrap似乎不支持。

Answer 2

css文件

      "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"

打开CSS文件

     node_modules -> ngx-bootsrap -> datapicker -> bs-datepicker.css class

使用“检查元素”找到要更改的css类 然后在bs-datepicker.css中找到该类并进行更改 例如，我想将标题颜色从绿色更改为蓝色

    .theme-green .bs-datepicker-head {
      // background-color :#green;  
      background-color: #4498fb;

     }

我更改标题的背景颜色