I'm using Angular 9 and ng-lightning 7. I'm trying to use the ngl-datepicker-input component, but I'm having trouble having it behave how I want. The effect I'd like to achieve is to have a save() method be invoked EITHER:
- When a date is selected in the datepicker popup window
- When the user is done making changes to the input box (ie: the Angular (change) event binding for an input box)
However, it seems like the ngl-datepicker-input (https://ng-lightning.github.io/ng-lightning/#/components/datepickers) only provides the (valueChange) EventEmitter. This fires when the user selects a date in the datepicker popup window (ok for me) but it also fires on every keystroke into the input box (NOT ok for me). I don't want to save() until the user is done with editing.
I tried using just an ordinary (change) event binding on the input like below. This works very well for any user interactions with the input box. However, selecting a date out of the input box does not fire the (change) event, so I'm not able to capture those changes.
<ngl-datepicker-input
format="middle-endian"
[openOnInputClick]="false"
[class.slds-has-error]="!model.valid"
[(ngModel)]="checkpointDate"
#model="ngModel">
<input nglDatepickerInput type="text" (change)="save()">
</ngl-datepicker-input>
How can I either:
- Use the
(change)event binding on the input box, and then separately handle changes emitted by ONLY the datepicker popup window? - Allow selections in the datepicker popup window to also trigger a
(change)event in the input box?
