单击打开 bootstrap 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

我没有想出的一个挑战是在输入字段中获取两个日期，但你必须往返。

其中大部分摘自 examples 和 api 视图中共享的示例。

单击打开 bootstrap angular 范围日期选择器

Open bootstrap angular range date picker on click

javascript

ng-bootstrap

angular