Angular-xeditable Editable (Bs3) with date and ng-

Question

I try to extend a specific example of Angular-xeditable Editable row (Bs3) adding the field "date of birth"

I've created a jsfiddle to describe the problem

http://jsfiddle.net/ffgj62q0/ (right link)

<div ng-app="app" ng-controller="Ctrl">
<table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold">
        <td style="width:35%">Name</td>
        <td style="width:20%">Date of b</td>
        <td style="width:10%">Status</td>
        <td style="width:10%">Group</td>
        <td style="width:25%">Edit</td>
    </tr>
    <tr ng-repeat="user in users">
        <td>
            <!-- editable username (text with validation) --> <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
      {{ user.name || 'empty' }}
    </span>

        </td>
        <td> <a href="#" editable-bsdate="user.dob" e-name="dob" e-datepicker-popup>
        {{ (user.dob | date:"dd/MM/yyyy") || 'empty' }}
      </a>

        </td>

The popup doesn't appear. :-(

I found this example that works with one date field.

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

Any hint to solve this specific problem, please?

Regards C.

Answer 1

It is problem with X-editable js.

changed x-editable.js

to angular-xeditable - 0.1.9

Answer 2

I forked your fiddle (also updated some resources, for example set angularjs to 1.4.8 on the javascript settings of the jsfiddle - "FRAMEWORKS AND EXTENSIONS", and removed angular.min.js from the jsFiddle's external resources).

And then I just added some missing stuff, like explained on the angular-xeditable site (http://jsfiddle.net/cewm89y3/5/)

1. I added the missing dependency of ui-bootstrap, both to the jsfiddle's resources and to the module.
2. Also added e-is-open and e-ng-click attributes just as in the example from angular-xeditable,

... and in my fiddle the datepicker opens.