Question

我想自定义ngx-bootstrap datepicker弹出窗口，并想在日历中添加具有某些链接的按钮。

我尝试在datepicker模板中添加按钮。它可以在其他页面上运行，但是无法在ngx-bootstrap模态弹出窗口的datepicker模板中看到添加的自定义内容。

我获得了从here添加自定义模板的参考。

Here我要在模式弹出窗口的内部和外部添加用于自定义datepicker的运行stackblitz代码。

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

Ngx-bootstrap模式弹出窗口中的自定义Datepicker

0 个答案: