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

Question

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

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

- sandip

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

这里有一个正在运行的StackBlitz演示。

更好的解决方案是允许传递模板给日期选择器，但Ngx-Bootstrap似乎不支持该功能。

- ibenjelloun

---

@ibenjelloun 为什么要同时导入 BsDatepickerModule.forRoot(), DatepickerModule.forRoot()？ - Winnemucca

@Winnemucca，我从Stackblitz中删除了DatepickerModule的导入。 - ibenjelloun

嗨，你知道我为什么不能减小页面的宽度吗？无论我尝试什么，我都不能使日历变小。https://stackblitz.com/edit/angular-7rxmuq-8qgxp1 - eddy

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

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

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

     }

我改变了头部的背景颜色

- Nadeem Qasmi

---

永远不要更改 node_modules 中的任何内容：您需要在具有更高优先级的样式表中覆盖它。 - netalex