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

Question

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

我找不到任何自定义日期选择器的方法。我正在使用 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 似乎不支持该功能。

Answer 2

不推荐，您不应更改 node_modules' 文件，而是使用上面提到的 (ngx-bootstrap/datepicker) 库，我无法覆盖 CSS，所以我只是更改了 bs-datepicker。css 来解决我的问题。

CSS 文件

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

打开css文件

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

使用“inspect elements”找到您要更改的 CSS class 然后找到 class 到 bs-datepicker.css 并更改，例如，我想将 header 颜色绿色更改为蓝色

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

     }

我更改 header

的背景颜色

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

How to customize the ngx-bootstrap datepicker

customization

datepicker

ngx-bootstrap

angular

angular5