Bootstrap Datepicker with angular JS issue (again)

Question

I am trying to create an editable Grid in which there is a dateField which is editable. The cell will be shown as editable only if Cell is focussed

$scope.gridOptions = {
            data: 'result',
            enableCellSelection: true,
            enableRowSelection: false,
            enableCellEditOnFocus: true,
            multiSelect: false, 
            columnDefs: [
              { field: 'name',      displayName: 'Name',                enableCellEdit: false,  width: 60 },
              { field: 'age',       displayName: 'Age',                 enableCellEdit: false,  width: 60 },
              { field: 'sex',       displayName: 'Sex',                 enableCellEdit: false,  width: 90 },
              { field: 'dob',       displayName: 'DOB',                 width: 150,
                  editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" is-open="true" ng-input="COL_FIELD" ng-model="COL_FIELD" datepicker-append-to-body=true />',


              }                                  
            ]
          };

In the editableCellTemplate, if i am not using is-open="true", then pop up is not coming. If i am not using ng-input="COL_FIELD", focus is not getting removed from any cell. So, datepicker is not getting hidden .But if i am using both then, value is not getting selected. In the console the error says Expression 'true' used with directive 'datepickerPopup' is non-assignable!

There are a lot of questions on stackoverflow for this. I tried almost all, but no sucess.

What can be done? How can i remove the error? Please provide me with a working plunker. I am not able to create this issue with the plunker.

Edit

I think, i could not remove the error. The error is still the same

Expression 'true' used with directive 'datepickerPopup' is non-assignable!

How can i remove it? After removing it, i am sure it will work. I tried taking it as a scope variable, and referencing it, but value is not getting replaces as true in when i am checking it using Inspect element. If i am using it as a variable and concatenating the value in template like 'is-open="' + $scope.dateFormat.opened + '"' , still the same error is there.

Edit 2

What is this is-open used for? Somewhere i see its value equlas to true, somewhere just opened. In one of the example over here in Stackoverflow its just opened1 and opened2. What is this? And how to use this?

I have removed the error using bcombs technique

Edit 3

After further debugging, i found that, datePicker is getting opened (if i am using the method mentioned by bcombs)but, it is getting closed as soon as it is opening.

     $scope.$on('ngGridEventStartCellEdit', function () {
         debugger;
     });

Edit 4 From more manipulation what i concluded is If ng-input is used, then it breaks the 2 way binding. i.e If u change the date value textfield, then in the datePicker it will be reflected, but if you will try to change the value using datePicker, it will not be reflected in textField.

If you remove ng-input, this 2 way binding, remain correct, so it works, but this causes ngGridEventEndCellEdit event NOT fired. so, the focus is not getting lost. Value is getting selected, datePicker is getting closed (if instead enableCellEditOnFocus:true, i use enableCellEdit:true), but focus remains on the textField..

Need help. Hope the update helps in solving the issue

Answer 1

I'm no expert on bootstrap directives or their angular implementations... But to directly answer the question of how to remove the bug:

I'm fairly certain that the is-open attribute cannot be a primitive value. It needs to be a variable that will hold the (boolean) state of whether this particular widget is open. In my code, I use a single object to hold these flags for all my datepickers, such as:

openDatePickers: {}

Then, in the cellTemplate string, I give it a unique id such as:

' is-open="openDatePickers[\'dob_{{row.entity.name}}\']" '

(note that I'm using the "name" property to match your example, but a unique ID is preferred).

Edit in response to comment:
The celltemplate has access to its controller scope, so the simplest approach is to simply declare:
$scope.openDatePickers={};

As for how this works, it depends a little on which codebase you are using.
I'm using angular-ui, and in ui-bootstrap-tpls-0.8.0.js at line 1140 you can see where the directive manages the "is-open" attribute.
If the attribute is not supplied, the directive manages this flag internally with a closure, but behavior is different When the attribute IS supplied. The way the assignment works is straightforward in both cases: the variable (whether the internal closure, or the one you supplied in the attribute) is simply toggled between states.

Edit in response to your debugging
As far as the focus thing: I don't use ng-input or enableCellEditOnFocus. I do use:
enableCellSelection: true
...and our client didn't want manual edits of the field to be allowed, so my input element has:
ng-readonly="true"

This should be a functional workaround for your issue as long as your use case doesn't require that you allow manual edits to the input field.