question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to detect change events from datepicker within custom component?

See original GitHub issue

I am trying to create a simple custom component for forms that contains both ngbDatepicker and Timepicker inputs.

How can I detect changes to those inputs? I’ve tried passing change events on the inputs like this: <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker" (change)="onChange($event)"> and <ngb-timepicker [(ngModel)]="time" (change)="onChange($event)" [meridian]="meridian"></ngb-timepicker>

I’ve also tried using ngOnChanges(changes: SimpleChange){...}

But the change event is never detected.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.1.2

ng-bootstrap: 4.1.2

Bootstrap: 4.1.2

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
gangfangcommented, Jun 15, 2017

@wesleycho ngModelChange only trigger when hour or minute field loses focus.

Is there any way to invoke ngModelChange on (keyup)?

User of form may leave the model null if they keep cursor on either (hour or minute) input field.

1reaction
wesleychocommented, May 6, 2017

Couldn’t you use the ngModelChange output?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to detect bootstrap datetimepicker change events within ...
Try ngModelChange instead of change . <input class="form-control" (ngModelChange)="changeDate($event)" [(ngModel)]="startRegistrationDate" ...
Read more >
How to use Bootstrap Datepicker to get date on change event
In this article, we will learn how to use Bootstrap Datepicker to get a date on changes of events. Bootstrap Datepicker is an...
Read more >
Datepicker change event - Power Platform Community
Here, we are using jQuery to identify all DateTime pickers on the page, and then dispatch a custom JS Custom Event. Notice here...
Read more >
Datepicker input and change events - StackBlitz
can be found in the LICENSE file at http:/ /angular.io/license -->. Enter to Rename, Shift+Enter to Preview. Compiling application & starting dev server…...
Read more >
Datepicker - Angular powered Bootstrap
Datepicker will help you with date selection. It can be used either inline with NgbDatepicker component or as a popup on any input...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found