如何在输入字段的 ng-bootstrap Datepicker 中检测日期选择？

Question

我们在项目中使用ng-bootstrap Datepicker 作为指令：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" [(ngModel)]="model"
         (ngModelChange)="onDateSelected()">

当前行为是在选择日期选择器中的日期时以及每次对输入字段进行更改时调用onDateSelected() 。

所需的行为是只要用户单击日期选择器中的日期或将光标移出<input> （即模糊），就会调用onDateSelected() )。

我的方法是将(ngModelChange)更改为(blur) ：

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
         [(ngModel)]="model">

但这会导致onDateSelected()不被调用，当从日期选择器中选择日期时 - 这有点道理，因为光标不在<input> 。 但是，我找不到某种dateSelected搜索时-活动NG-引导文档上，我可以调用onDateSelected()

<input class="form-control"
         name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
/* missing -> */ (dateSelected)="onDateSelected()" /* <- */ [(ngModel)]="model">

有什么我想念的吗？ 或者也许是实现这种行为的另一种方式？ 我想不出是唯一一个有这个要求的人......

Answer 1

同时， issue已经关闭，1.1.0 将有一个 (dateSelect) 事件： https : //github.com/ng-bootstrap/ng-bootstrap/pull/2254

Answer 2

<input class="form-control"
     name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" 
[(ngModel)]="model"
     (select)="onDateSelected()">

这将起作用，并且每当您在onDateSelected()选择日期时都会调用onDateSelected()

Answer 3

猜猜select输出方法是您正在寻找的。

Select：当用户使用键盘或鼠标选择日期时触发的事件。 事件的负载当前选择的是 NgbDateStruct。

参考输出部分

Answer 4

这是解决方案：

<input 
class="form-control"    
name="startDate" 
[(ngModel)]="startDate"
(dateSelect)="doSomething()"
(blur)="doSomething()"
ngbDatepicker 
#startDate="ngbDatepicker"
>

这里 (dateSelect) 处理从日历选择器中进行选择， (blur) 在输入失去焦点时处理手动输入。

Answer 5

使用dateSelect对我dateSelect ：

<input class="form-control"
     name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); ()onDateSelected()"
     [(ngModel)]="model">