There is an input field where a user can either enter a date manually or choose one from the uib-datepicker calendar (https://angular-ui.github.io/bootstrap/). When the user clicks on the input, the calendar pops up for date selection. Here is the input code:
<input
datepicker-append-to-body="calendarCtrl.appendToBody"
uib-datepicker-popup="calendarCtrl.dateFormat"
ng-model="calendarCtrl.ngModel"
ng-click="calendarCtrl.open"/>
I want to give users the option to update the ng-model only after they have finished typing and blurred out of the input field. To achieve this, I am trying to utilize ng-model-options.
ng-model-options={updateOn: 'blur'}
This method works well when a user manually types in a date - the ngModel is not updated until the input is blurred, and any validation is deferred until then. However, there seems to be an issue with the calendar popup functionality. When a user tries to select a date from the calendar, nothing happens. It appears that clicking on the calendar triggers a blur event on the input field.
Has anyone encountered this issue before? Is there a setting within ng-model-options or the datepicker itself that would allow users to make a selection from the calendar without immediately updating the ng-model?
Thank you!