0

我想自定义 ngx-bootstrap 日期选择器弹出窗口,并想在日历中添加一些链接的按钮。

我尝试在 datepicker 模板中添加按钮。它在其他页面中工作,但无法在 ngx-bootstrap 模式弹出窗口内的 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>
4

0 回答 0