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

Question

We use the ng-bootstrap Datepicker as Directive in our project:

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

The current behaviour is that onDateSelected() is called when a date in the datepicker is selected, as well as every time a change is made to the input field.

The desired behaviour is that onDateSelected() is called whenever the user clicks on a date in the datepicker or moves the cursor out of the <input> (ie blur).

My approach was to change (ngModelChange) to (blur) :

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

but this leads to onDateSelected() not being called, when a date is selected from the datepicker - which kinda makes sense, because the cursor is not inside the <input> . However, I could not find some sort of dateSelected -Event when searching the ng-bootstrap docs on which I could call onDateSelected() :

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

Is there something I miss? Or maybe another way to implement this behaviour? I can't think of being the only one with this requirement...

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()">

This will work and onDateSelected() is called whenever you select a date in datepicker

Answer 3

Guess select output method is what you are looking for.

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

Refer the output section

Answer 4

Here is the solution:

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

Here (dateSelect) handles choosing from the calendar picker and (blur) handles manually input when the input loses focus.

Answer 5

Using dateSelect worked for me:

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