我想自定义 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">×</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>