How to detect date selection in ng-bootstrap Datepicker on input field?
Solution 1
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
Solution 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
Solution 3
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.
Solution 4
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
Florian Gössele
"We are what we repeatedly do. Excellence, then, is not an act but a habit." - Aristotle
Updated on July 23, 2022Comments
-
Florian Gössele almost 2 years
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 ofdateSelected
-Event when searching the ng-bootstrap docs on which I could callonDateSelected()
:<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...
-
Florian Gössele about 6 years(select) only applies to NgbDatepicker Component. I'm using the NgbInputDatepicker Directive here, with which (select) does not work unfortunately.
-
Karthick Manoharan about 6 yearsFrom the code you shared i can only see
NgbDatepicker
being used. Should you update your code? -
Florian Gössele about 6 yearsThat's because the selector of the NgbInputDatepicker Directive is also 'ngbDatepicker': ng-bootstrap.github.io/#/components/datepicker/examples (second demo) Or did I mess something up?
-
emirhosseini almost 5 yearsThis only fires for me when I select a date using the calendar. NOT when typing in a date into the input field manually!
-
emirhosseini almost 5 yearsThe event only fires when you select a date using the calendar. NOT when typing in a date manually.
-
Robin about 4 yearsI know your comemtn i
-
Robin about 4 years@emirhosseini I know your comment is quite old, but now select is depricated and dateSelect still does not seem to fire on typing