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

Question

我们在项目中使用ng-bootstrap Datepicker as Directive：

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

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

期望的 行为是 onDateSelected() 在用户单击日期选择器中的日期或将光标移出 <input> (即模糊）。

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

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

但这会导致 onDateSelected() not 被调用，当从日期选择器中选择一个日期时 - 这有点有意义，因为光标不在 <input>。但是，在搜索可以调用 onDateSelected():

的 ng-bootstrap docs 时，我找不到某种 dateSelected-Event

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

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

Answer 1

猜select输出方式就是你要找的

Select: An event fired when user selects a date using keyboard or mouse. The payload of the event is currently selected NgbDateStruct.

参考output section

Answer 2

与此同时，issue has been closed and there will be a (dateSelect) event in 1.1.0: https://github.com/ng-bootstrap/ng-bootstrap/pull/2254

Answer 3

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

这将起作用，并且只要您 select 在 datepicker

中输入日期，就会调用 onDateSelected()

Answer 4

使用 dateSelect 对我有用：

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

Answer 5

解决方法如下：

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

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

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

How to detect date selection in ng-bootstrap Datepicker on input field?

html

datepicker

ng-bootstrap

angular