editable-bsdate does not work with the latest ui.bootstrap

[lucassus]

For some reason the datepicker popup is not beeing opened. Here is demo http://jsfiddle.net/lucassus/j6486p8q/

I forked this jsfiddle from http://jsfiddle.net/NfPcH/23/ which I found on the documentaion page and I upgraded AngularJS from 1.0.8 to 1.2.22 and ui.boostrap from 0.6.0 to 0.11.0.

[lucassus]

It seems that it also works with ui.bootstrap 0.10.0 see http://plnkr.co/edit/NLg9pFL2Sl5gkkvMr6vT?p=preview
I guess the breaking change is here angular-ui/bootstrap@7f4b40e

[lucassus]

ok, I've just figured out a workaound for this problem http://plnkr.co/edit/Y4ilZ4rITYnjAyq2xAUa?p=preview

[prowave]

I experienced the same issue. Your fix works good. Thank you.

[prowave]

Another side effect I see as a result of moving from 0.10.0 to 0.11.0 is that the popup default to today, and not the date being edited.

[merenzo]

I see here (angular-ui/bootstrap#2149) that many UI Bootstrap 0.11.0 users report this problem. Turns out that it was a deliberate feature-add by the authors to remove the "open on focus" behaviour (angular-ui/bootstrap#1922 (comment)).

The workaround above (thanks @lucassus) causes all datepickers on my page to open at once (as you would expect when I bind them all to the same scope variable :) I tried modifying xeditable.js line 69 (the editableBsdate directive) from this:
inputTpl: '<input type="text">'
to this:
inputTpl: '<input type="text" class="form-control" is-open="dt.open" ng-click="dt.open=true">'

and it's nearly there, but still glitchy.

[se-panfilov]

+1

[dtam]

+1

[sallampalli]

@lucassus : Hey , good fix, however, I am trying to get this(AngularUI datepicker) working on the editable form http://vitalets.github.io/angular-xeditable/#editable-form
And I am using AgularUIBootStrap 0.11.0, Angular 1.2.13 and Bootstrap 3.0.0 and I can't get this to work. Any thoughts ?

[hudsonhyunlim]

@lucassus solution still works with angular 1.3.x, ui-bootstrap 0.11.x, and angular-xeditable 0.1.8

[sallampalli]

@lucassus : Here is the jsFiddle of the above mentioned stack and I'm not sure why it isnt working with the solution : http://jsfiddle.net/NfPcH/6518/

[ganapativs]

Replace line no:1552 with this code in angular bootstrap UI 0.12.0:

var keydown = function(evt, noApply) {
scope.keydown(evt);
};
var clicked = function(evt, noApply) {
scope.clicked(evt);
};
element.bind('keydown', keydown);
element.bind('click', clicked);

  scope.keydown = function(evt) {
    if (evt.which === 27) {
      evt.preventDefault();
      evt.stopPropagation();
      scope.close();
    } else if (evt.which === 40 && !scope.isOpen) {
      scope.isOpen = true;
    }
  };
  scope.clicked = function(evt) {
    scope.$apply(function(){
      scope.isOpen=!scope.isOpen;
    });
  };

Now, datepicker works with click on input element.

[heroc0111]

Thanks @lucassus.
+1

[mmilito]

+1 -- the workaround does not seem to be working for me either.

[vpratti]

Workaround does not work for me either

[ilbarzo]

same issue for me, using angular 1.3.15, ui-bootstrap 0.13.0, and angular-xeditable 0.1.8

<span editable-bsdate="defannoimp.chiudi" e-name="chiudi" e-form="rowform" e-datepicker-popup="dd-MM-yyyy" onbeforesave="checkChiudi($data, defannoimp.anno)">
    {{ defannoimp.chiudi | date:"dd/MM/yyyy" }}
</span>

when edit row and click on field, calendar is not shown

[slavoroi]

ilbazro... lucassus fixed it for me!
it works! need to add $timeout to the scope :) as well.

[asakalou]

Hello guys,
Could you please take a look at this issue http://plnkr.co/edit/6VkbN3lTqUqriPcp7VM9?p=preview
(Datepicker is not opened on calendar button click).
I've added e-ng-click and it is called twice during calendar button click (both wrapper div and calendar button keep ng-click handler).
This issue prevents from opening picker. Please suggest what is the best way to fix this. Thanks.

Versions:
xeditable: 0.1.9
angular: 1.3.16
angular-ui-bootstrap 0.12.1

[ganapativs]

@asakalou Here is the working code.

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

I have replaced your angular bootstrap UI file with modified code.

[vinhboy]

@ganapativs thanks for the sample, got this working for me in angular-ui-bootstrap 0.13.0 and angular 1.3 without modification to angular-ui-bootstrap

[seksitha]

This's my solution with editalbe 0.1.8 angular 1.4.0 ui-bootstrap 0.12 after dig deep into ui-bootstrap document:
<span class= "form-control" editable-bsdate="data.date" e-ng-click="opened = !opened" e-class ="form-control" e-is-open="opened" e-datepicker-popup = "dd-MM-yyyy" e-name= "date" >{{data.date}}</span>

Note: e-class = "form-control" is optional. I add because xeditable is not include when invoked.
e-ng-click and e-is-open is used in ui-bootstrap to toggle the datepicker.
Hope this help!

[Sampath-Lokuge]

@seksitha Thanks,It works :)

[vishalbedre]

It is problem with X-editable js.

changed x-editable.js

to angular-xeditable - 0.1.9

http://plnkr.co/edit/pBnxWiqrLwOG1UNWyTJM?p=preview****