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> (i.e. 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...

score 14 · Accepted Answer · answered Apr 09 '18 at 16:59

14

Meanwhile, the issue has been closed and there will be a (dateSelect) event in 1.1.0: https://github.com/ng-bootstrap/ng-bootstrap/pull/2254

answered Apr 09 '18 at 16:59

Florian Gössele

4,376
7
25
49

3

The event only fires when you select a date using the calendar. NOT when typing in a date manually. – emirhosseini Jul 12 '19 at 19:40
I know your comemtn i – Robin Apr 30 '20 at 07:56
@emirhosseini I know your comment is quite old, but now select is depricated and dateSelect still does not seem to fire on typing – Robin Apr 30 '20 at 07:59

score 6 · Answer 2 · edited Apr 07 '19 at 18:35

6

<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

edited Apr 07 '19 at 18:35

double-beep

5,031
17
33
41

answered Apr 07 '19 at 18:15

nitinsingh9x

632
6
12

brett · Answer 3 · 2021-02-01T15:58:32.180

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.

edited Feb 01 '21 at 15:58

answered Jan 12 '21 at 14:53

brett

261
1
5
16

score 1 · Answer 4 · answered Feb 21 '18 at 10:38

1

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

answered Feb 21 '18 at 10:38

Karthick Manoharan

663
3
10

(select) only applies to NgbDatepicker *Component*. I'm using the NgbInputDatepicker *Directive* here, with which (select) does not work unfortunately. – Florian Gössele Feb 21 '18 at 10:51
From the code you shared i can only see `NgbDatepicker` being used. Should you update your code? – Karthick Manoharan Feb 22 '18 at 02:50
1

That's because the selector of the NgbInputDatepicker Directive is also 'ngbDatepicker': https://ng-bootstrap.github.io/#/components/datepicker/examples (second demo) Or did I mess something up? – Florian Gössele Feb 23 '18 at 08:07
2

This only fires for me when I select a date using the calendar. NOT when typing in a date into the input field manually! – emirhosseini Jul 12 '19 at 19:39

score 0 · Answer 5 · edited May 20 '20 at 16:05

0

Using dateSelect worked for me:

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

edited May 20 '20 at 16:05

double-beep

5,031
17
33
41

answered May 20 '20 at 14:48

greatertomi

479
9
10

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

5 Answers5

Linked