(select) event for NgbInputDatepicker

[floisloading]

Feature Request

(select)-Output on the -Element on which the NgbInputDatepicker is bound to.

Right now, there is no way to detect if a user has selected a date from the datepicker: https://stackoverflow.com/questions/48903442

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/DdoP63tqccsItPNZOG4n?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.2.0

ng-bootstrap: 1.0.0-beta.9

Bootstrap: 4.0.0

[maxokorokov]

Also related to #1984

[maxokorokov]

Might not be a good idea to use(select) maybe, as it already exists on the input.

I suggest we add the following:

@Output() dateSelect = new EventEmitter<NgbDateStruct>();

<input ngbDatepicker (dateSelect)="onDateSelect($event)" />

Also deprecate existing (select) event and rename it to (dateSelect) on the non-input datepicker for consistency

[connormlewis]

Is there any workaround for this until the dateSelect output makes it into a release?

[floisloading]

@connormlewis (ngModelChange) is triggered on dateSelect. However, it is also triggered on every keystroke when entering a date via keyboard: https://stackoverflow.com/questions/48903442

[connormlewis]

@frot-io I tried using that but didn't have success in my specific case. My ngb-datepicker is on an input in a reactive form, and when I triggered a function using (ngModelChange), the value of the reactive form had not yet been updated to the value selected in the date picker.

I eventually got around this by listening to the .valueChanged observable inside the form, which seems to give the correct value after a date is picked.

[floisloading]

@connormlewis could you give a plunker example?

[connormlewis]

@frot-io Yep, here's a link http://plnkr.co/edit/1w2j3iIK1tmbPHxx7Yro?p=preview

[floisloading]

@connormlewis I had almost the same issue, but with template-driven forms. I got it solved by putting (ngModelChange) before [(ngModel)] but that couldn't work here.

My guess is that you shouldn't use (ngModelChange) for reactive forms because of concurrency. Instead there is an Observable on which one can subscribe. I updated the plunker: http://plnkr.co/edit/wGqmUiTd8SQZi5yhcQx4?p=preview

[robeverett]

@frot-io I tried using that but didn't have success in my specific case. My ngb-datepicker is on an input in a reactive form, and when I triggered a function using (ngModelChange), the value of the reactive form had not yet been updated to the value selected in the date picker.

I eventually got around this by listening to the .valueChanged observable inside the form, which seems to give the correct value after a date is picked.

Hi
Could you show me how you listen to 'valueChanged' in Angular code.
I'm assuming this issue still exists as at Angular 7.0.3, but can never find any consistent info all in one place!

There is little info for example on using reactive forms with bootstrap directives - it's usually ([ngModel]).

I managed to find some interesting validation code elsewhere on here, though it is inadequate as it only tests for a string: it should really validate against the NgbDate object, I'd have thought:

this.reportForm.controls['dateFromPicker'].valueChanges.subscribe(data => {

  this.fromDate = data;
  this.showToDatePicker = true;     

  if (!data || (typeof data === 'string' && data.length == 0)) {
    this.reportForm.patchValue({
      dateFromPicker: null
    }, { emitEvent: false });

    this.invalidDates = true;
  }
});

[floisloading]

I'm not working in this project anymore, so I cannot show you code examples... I think my code was similar to yours (or as described here).