Second open of date picker throws an error

[kuceram]

angular-bootstrap: 0.13.4 angular: 1.4.0 angular-xeditable: 0.1.11

Having this code:

<small editable-bsdate="myDate"
             e-name="my-date" e-datepicker-popup="dd/MM/yyyy" e-init-date="false"
             e-is-open="data.isOpen" e-ng-click="data.isOpen = true">
     {{myDate | date) || 'empty'}}
</small>

I can open a bootstrap date picker. However, when I close it and open it again it fires an exception somewhere in angular ui bootstrap (some focus function). It shows the datepicker anyway. This happens even if I set e-on-open-focus="false".

I have a suspicion, that bootstrap date picker is rendered twice by xeditable directive.

[ckosloski]

I think this can be fixed by adding the following to the UibDatepickerPopupController:

$element.on('$destroy', function() {
      $scope.$destroy();
     });

I have opened an issue with ui-bootstrap

[geostima]

tried this hack by modifying the actual UibDatepickerPopupController - didn't work.

[ckosloski]

Here is a plunkr that shows the fix working.

Do you have an example of the fix not working?

[jobski]

@ckosloski Tried your fix but as @geostima said, it didn't work.

When I open the datepicker for the second time, I get these errors in chrome:

Error: [$compile:ctreq] http://errors.angularjs.org/1.5.3/$compile/ctreq?p0=ngModel&p1=uibDatepicker at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:6:416 at jb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:70:406) at jb (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:70:473) at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:65:259) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:76:125 at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:58:140) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:57:281 at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:62:133 at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:59:122) <li ng-transclude="">(anonymous function) @ angular.js:13424(anonymous function) @ angular.js:10137ja @ angular.js:9625n @ angular.js:9022g @ angular.js:8333n @ angular.js:9017g @ angular.js:8333(anonymous function) @ angular.js:8213(anonymous function) @ angular.js:8551d @ angular.js:8350l @ angular.js:9072(anonymous function) @ angular.js:25323m.$digest @ angular.js:16869m.$apply @ angular.js:17133(anonymous function) @ angular.js:24813n.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3 angular.js:13424 TypeError: Cannot read property 'getFullYear' of undefined at _refreshView (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js:7:25823) at refreshView (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js:7:22763) at init (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js:7:25624) at link (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js:7:29743) at ja (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:80:35) at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:65:220) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:76:125 at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:58:140) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:57:281 at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:59:122) <table class="uib-daypicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}" ng-switch-when="day" tabindex="0">(anonymous function) @ angular.js:13424(anonymous function) @ angular.js:10137ja @ angular.js:9625n @ angular.js:9022(anonymous function) @ angular.js:9380g @ angular.js:8333(anonymous function) @ angular.js:8213d @ angular.js:8350l @ angular.js:9072(anonymous function) @ angular.js:29434q @ angular.js:321(anonymous function) @ angular.js:29433m.$digest @ angular.js:16869m.$apply @ angular.js:17133(anonymous function) @ angular.js:24813n.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3

TypeError: Cannot read property 'getFullYear' of undefined at _refreshView (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js:7:25823) at refreshView (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js:7:22763) at init (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js:7:25624) at link (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js:7:29743) at ja (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:80:35) at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:65:220) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:76:125 at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:58:140) at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:57:281 at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js:59:122) <table class="uib-daypicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}" ng-switch-when="day" tabindex="0">(anonymous function) @ angular.js:13424(anonymous function) @ angular.js:10137ja @ angular.js:9625n @ angular.js:9022(anonymous function) @ angular.js:9380g @ angular.js:8333(anonymous function) @ angular.js:8213d @ angular.js:8350l @ angular.js:9072(anonymous function) @ angular.js:29434q @ angular.js:321(anonymous function) @ angular.js:29433m.$digest @ angular.js:16869m.$apply @ angular.js:17133(anonymous function) @ angular.js:24813n.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3

[Sampath-Lokuge]

Thanks @ckosloski .Your solution is working :smile:

[anthony-foulfoin]

Same problem for me : there is no error thrown, but the second time I try to edit a date field, the input field becomes empty.

[ckosloski]

Try using the latest release (0.2.0). It looks like #489 might have fixed the issues.

[kuceram]

Upgrading the plugin, I could not open the date picker at all. It just doesn't work and it doesn't throw any error. However for latest angular bootstrap it works, see https://github.com/vitalets/angular-xeditable/issues/466

[ckosloski]

What version of bootstrap where you using when it didn't work? Do you have a jsfiddle or plunkr showing your issue?

[kuceram]

The setup was: angular-bootstrap: 0.13.4 angular: 1.4.10 angular-xeditable: 0.2.0

but maybe we can close it as it works with the newest version of angular-bootstrap...

[ckosloski]

Yes, the current version of xeditable requires angular-ui-bootstrap 1.0.0 or higher. In version 1.0.0 they renamed many of the directives and xeditable was updated to work with these new directive names.

[kuceram]

ok, make sense...thanks anyway.

[afgonzal]

@ckosloski the demo and your plunkr have the same issue, the styles of the datepicker are wrong (looks huge etc) like it´s ignoring the boostrap styles for the picker

[ckosloski]

Yes, I am aware of the issue. The issue is fixed and merged, but not yet released.

[afgonzal]

Great, is that version downloadable?

[ckosloski]

You would have to download the source code and build it yourself.

[afgonzal]

sure, np, is it under github? link?

thanks

[ckosloski]

https://github.com/vitalets/angular-xeditable Clone or download link.

[eugef]

@afgonzal you can try the latest release 0.4