How to customize the ngx-bootstrap datepicker

问题

I want to customize the ngx-bootstrap datepicker popup. Basically I want to add link/button in the calendar showing date and on click of that date will get added to date picker field.

I couldn't find any way to customize the datepicker. I am using Angular 5 and ngx-bootstrap: https://valor-software.com/ngx-bootstrap/#/datepicker

Thanks in advance.

回答1:

You could create a custom component based on the original datepicker adding custom element to template making it look like an integrated element with some css :

First change the height of the datepicker popup :

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

Then add the custom element to the 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>

With some css :

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

Here is a running stackblitz demo.

A better solution would be to have the possibility to pass a template to the datepicker, but ngx-bootstrap doesn't seem to support that.

回答2:

Not Recommended, You should not change on node_modules' files, but to using the above mention ( ngx-bootstrap/datepicker) library, I couldn't be able to overwrite the CSS so that I just changed on bs-datepicker.css to solve my problem.

CSS file

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

open css file

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

find the CSS class which you want to change using " inspect elements " then find the class into bs-datepicker.css and change, for example, I want to change the header color green to blue

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

     }

I change the background color of the header

来源：https://stackoverflow.com/questions/51062003/how-to-customize-the-ngx-bootstrap-datepicker

标签

angular

datepicker

angular5

customization

ngx-bootstrap