Custom Datepicker in Ngx-bootstrap modal popup

Question

I want to customize the ngx-bootstrap datepicker popup and want to add button in the calendar which has some link.

I have tried adding buttons in datepicker template. It is working in other pages but am not able see added custom content in the datepicker template inside ngx-bootstrap modal popup.

I got the reference to add custom template from here.

Here I am adding the running stackblitz code for custom datepicker inside and outside the modal popup.

 <div class="modal-header">
  <h4 class="modal-title pull-left">Modal with Datepicker</h4>
  <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <div class="test-box">
    <h4>Datepicker</h4>
    <div class="form-group">
      <div class="div-container">
        <input type="text"
              #dp="bsDatepicker" 
              class="form-control"
              autocomplete="off" 
              bsDatepicker 
              [(bsValue)]="myDateValue"
              [bsConfig]="datePickerConfig">
        <div class="custom-content position-absolute" *ngIf="dp.isOpen">
          <a (click)="customAction()">{{myDateValue | date:'short'}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

It is nice that you have a demo on Stackblitz, but for completeness, please add some code to the question as well — John, Mar 12 '19 at 07:12
@John Sure, I have added the stackblitz editor link for code — Techie_T, Mar 12 '19 at 07:35
I understand, but in case the Stackblitz link gets broken (for some reason), it is nice to have some code in the question as well. It does not have to be all of the code, but the code most related to your question. Maybe the code inside the `AppComponent` in the demo is sufficient. Cheers. — John, Mar 12 '19 at 07:38
@John I have also added the html template for the code. Thanks — Techie_T, Mar 12 '19 at 07:45
if you remove the class="custom-content position-absolute" then in modal popup you can see the added content when date-picker is open , i think css needs to be fixed in modal popup case — LogicBlower, Mar 12 '19 at 08:32
@LogicBlower Yes, the problem is the added custom text is not visible over the datepicker inside ngx-modal popup. You can check it is visible in the datepicker which is outside modal with the same css styles. — Techie_T, Mar 12 '19 at 08:49

score 0 · Answer 1 · answered May 18 '23 at 15:25

You can use bs-datepicker-inline inside a modal. Example:

<div class="modal-body">
  <div class="div-container">
    <bs-datepicker-inline class="custom-datepicker" [bsValue]="bsInlineValue"></bs-datepicker-inline>
  </div>
</div>

You can embed this in a modal and add functionalities to your liking (Links, buttons, etc).

::ng-deep .custom-datepicker { .bs-datepicker { background-color: #0E126A; } }

Find details in: Inline datepicker

Custom Datepicker in Ngx-bootstrap modal popup

1 Answers1