title: How to create ng-bootstrap date range picker popup from button element
body: <p>I am trying to add functionality for the daterangepicker to allow for filtering of a list of items based on the date range selected.</p>
  
  <p>I am looking to incorporate the following functionlity:</p>
  
  <ol>
  <li><p>Have a button that says "Filter". No input.</p></li>
  <li><p>User can click on that button which then opens the calendar showing 2 months - the current and next.</p></li>
  <li><p>User can then select a date range.</p></li>
  <li><p>The selected date range then becomes the label of the button showing the user what he or she selected.</p></li>
  </ol>
  
  <p>Is this functionality possible? It breaks completely when I try to add the calendar on the button. And when I use the input to popup the calendar it only allows me to select a start date, then closes.</p>
  
  <p>Here is what I am going for:</p>
  
  <pre><code>&lt;button #dp ngModel (click)="d.toggle()" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t" ngbDatepicker #d="ngbDatepicker"&gt;
           Click Me
  &lt;/button&gt;
  
  
  &lt;ng-template #t let-date="date" let-focused="focused"&gt;
      &lt;span class="custom-day"
      [class.focused]="focused"
      [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
      [class.faded]="isHovered(date) || isInside(date)"
      (mouseenter)="hoveredDate = date"
      (mouseleave)="hoveredDate = null"&gt;
      {{ date.day }}
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>Thanks</p>