How to customize the ngx-bootstrap datepicker

Question

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.

Solution

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.

Comments

[Winnemucca]

@ibenjelloun why import both BsDatepickerModule.forRoot(), DatepickerModule.forRoot()?

[ibenjelloun]

@Winnemucca I removed the DatepickerModule import from the stackblitz.

[netalex]

don't change something in node_modules ever: you need to overwrite it in a stylesheet with an higher priority.

[eddy]

Hi, do you know I can't reduce the width of the body? No matter what I try I can't make the calendar smaller stackblitz.com/edit/angular-7rxmuq-8qgxp1