单击时打开Bootstrap角度范围日期选择器

Question

I want to open Angular bootstrap range datepicker on click. The below code is working fine for normal datepicker. How do I open a bootstrap range 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

Probably already solved this.

You have access to dayTemplate when using the datepicker directive.

[dayTemplate]="t" 

Your template start look like so ...

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

For this example I put the calendar click handler inside the ng template. But you can just as easily put it inside of the template. Remember with View child you can get hold of the datepicker methods that you would use such as open, close, and toggle.

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

A challenge that I have not figured out is getting both dates inside of the input field but you have to and from.

Much of this is taken from examples shared on the examples and api views.