如何从button元素创建ng-bootstrap日期范围选择器弹出窗口

Question

我正在尝试为daterangepicker添加功能,以允许根据所选的日期范围过滤项目列表.

我希望结合以下功能:

1. 有一个显示"过滤"的按钮.没有输入.

2. 用户可以单击该按钮,然后打开显示2个月的日历 - 当前和下一个.

3. 然后,用户可以选择日期范围.

4. 然后,所选日期范围将成为按钮的标签,向用户显示他或她选择的内容.

这个功能可以吗？当我尝试在按钮上添加日历时,它会完全中断.当我使用输入弹出日历时,它只允许我选择开始日期,然后关闭.

这就是我想要的:

<button #dp ngModel (click)="d.toggle()" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t" ngbDatepicker #d="ngbDatepicker">
         Click Me
</button>


<ng-template #t let-date="date" let-focused="focused">
    <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">
    {{ date.day }}
</ng-template>

谢谢