CODEWITHSUNDEEP
javascriptangularng-bootstrap
Santosh
Santosh

Reputation: 3837

Open bootstrap angular range date picker on click

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>

enter image description here

Upvotes: 2

Views: 3265

Answers (1)

Winnemucca
Winnemucca

Reputation: 3458

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.

Upvotes: 2

Related Questions