Using ng-model-options updateOn:blur with uib-datepicker popup

Question

I have an input that allows a user to either type or select a date via the uib-datepicker calendar (https://angular-ui.github.io/bootstrap/). When the user clicks on the input the datepicker pops-up allowing a user to make a selection Here is the input:

<input
     datepicker-append-to-body="calendarCtrl.appendToBody"
     uib-datepicker-popup="calendarCtrl.dateFormat"
     ng-model="calendarCtrl.ngModel"
     ng-click="calendarCtrl.open"/>

I need to allow the option for the user to not update the ng-model until the user has blurred the input. To do that I am trying to use ng-model-options.

 ng-model-options={updateOn: 'blur'}

This works great for when a user types a date into the input - the ngModel is not updated until a blur occurs and any validation isn't ran until blur. The problem is it breaks the functionality of the calendar popup in that nothing happens when a user then clicks on the open calendar to select a date. I'm assuming because when the user clicks on the calendar essentially a blur event is occurring on the input??

Has anyone came across this problem? Is there an ng-model-options option or something within the datepicker that would allow the user to still make a selection from the datepicker but not update the ng-model until a blur occurred on the input?

Thanks

K Scandrett K Scandrett · Accepted Answer · 2016-11-21T06:19:09

Sounds like you could use a temporary property ng-model="calendarCtrl.tempSelectedDate" for ngModel in the Date Picker.

Then use the ngBlur event (https://docs.angularjs.org/api/ng/directive/ngBlur) to update the real property ie. set calendarCtrl.ngModel = calendarCtrl.tempSelectedDate.

Also, while nothing stops you using the scope property calendarCtrl.ngModel in ngModel, the code will be easier to read if you use more meaningful names like ng-model="calendarCtrl.dateSelected".

Here's a working demo http://plnkr.co/edit/90mDPqzadjPt09Tp4SlI?p=preview.

I forked and expanded someone else's datepicker plnkr with two changes: adding ng-blur="blurDate = startDate" to the <input> & displaying the value with Blur Date: {{ blurDate }}.

Using ng-model-options updateOn:blur with uib-datepicker popup

1 Answers