javascript - 单击打开引导 Angular 范围日期选择器

Question

我想打开 Angular bootstrap range datepicker点击。下面的代码适用于普通的日期选择器。如何打开 bootstrap 范围日期选择器？

<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

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

使用日期选择器指令时，您可以访问 dayTemplate。

[dayTemplate]="t" 

你的模板开始看起来像这样......

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

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

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

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

其中大部分摘自在示例 和api View 中共享的示例。