点击打开bootstrap角度范围日期选择器

Question

我想在点击时打开Angular bootstrap range datepicker。以下代码适用于普通的datepicker。如何打开 bootstrap 范围的datepicker？

<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [displayMonths]="displayMonths" [navigation]="navigation" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
  <button class="btn btn-outline-secondary" (click)="d .toggle()" type="button">
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </button>
</div>

Answer 1

可能已经解决了这个问题。

使用datepicker指令时，您可以访问 dayTemplate 。

[dayTemplate]="t" 

您的模板开始如此......

<ng-template #t let-date="date" let-focused="focused">

对于此示例，我将日历单击处理程序放在ng模板中。但你可以轻松地将它放在模板中。请记住，使用View子，您可以获得将要使用的日期选择器方法，例如打开，关闭和切换。

https://stackblitz.com/edit/angular-skbpc8?file=app%2Fdatepicker-popup.html

我还没想到的一个挑战是将两个日期都输入到输入字段中，但是你必须来往。

大部分内容来自示例和 api 视图中分享的示例。