Using bootstrap-datepicker with angular xeditable

Question

I have a table and I would like to add in-line editing to that table. I started with ng-grid, however, I decided that while it worked well, I was spending too much time trying to fix the styling so that it would match the overall theme of my website. I started fresh and am now using a plain old html table with angularjs behind the scenes for its awesome two-way-data-binding property.

Everything has been going smoothly except for the fact that I am stuck on trying to get inline editing to work with bootstrap-datepicker: http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter. The reason I am using this datepicker over the ui-bootstrap datepicker that xeditable says you should use is because it does not look or feel right in my website. Here is what the ui-bootstrap datepicker looks like http://jsfiddle.net/NfPcH/23/. I like the simple and plain look of the bootstrap datepicker.

Here is a plunker of a table with xeditable and date fields to try and edit PLUNKER

Using bootstrap-datepicker as an input field works fine, a custom directive is used to properly update the model:

editablegrid.directive('datepicker', function() {
return {
    restrict : 'A',
    require : 'ngModel',
    link : function(scope, element, attrs, ngModelCtrl) {
        $(function() {
            var dp = $(element).datepicker({
                format : 'MM dd, yyyy'
            });

            dp.on('changeDate', function(e) {
                ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
                scope.$apply();
            });
        });
    }
}

I changed the xeditable source code to use bootstrap-datepicker (see lines 78-84 of xeditable.js)

/*
The New directive I've made for xeditable to use with the bootstrap-datepicker
*/
angular.module('xeditable').directive('editableBsdateNew', ['editableDirectiveFactory',
  function(editableDirectiveFactory) {
    return editableDirectiveFactory({
      directiveName: 'editableBsdateNew',
      inputTpl: '<input type="text" class="form-control form-control-inline input-sm" datepicker>'
     });
}]);

, however the problem lies somewhere with xeditable and how it updates the model of the selected row.

xeditable works perfectly for editing text and dropdowns in-line, trying to integrate with bootstrap-datepicker is proving to be difficult.

If there is some other way to use in-line editing with bootstrap-datepicker, I would not be opposed to trying it out. I was thinking that if this didn't work, maybe something with ng-show and ng-hide might do the trick.

Bader

Unfortunately not, however, I know what I have in the plunker is really close. I haven't taken a good look at it in a while but you can get the model to change correctly if you click on the text box to open up the calendar and use your arrow keys to navigate and enter to select a date. So there is something wrong with using the mouse to select a date. I'll be taking another look at it later this week. – Bader

You are right, with 1 slight change it may help. I think I kind of have it working, instead of using Render method use link method and bind properties that way. – Eccentricity

Answer 1

1 > Make sure you install two libraries - angular-xeditable - angular-bootstrap-datepicker

2> Create new directive

/* The New directive I've made for xeditable to use with the bootstrap-datepicker */

angular.module('xeditable').directive('editableBootstrapDatepicker', ['editableDirectiveFactory',   function(editableDirectiveFactory) {
     return editableDirectiveFactory({
       directiveName: 'editableBsdateNew',
       inputTpl: '<span ng-datepicker ng-options="datepickerOptions"></span>'
     });   } ]);

3> In HTML put something like:

<span editable-bootstrap-datepicker="yourDateModel" onbeforesave="validateBeforeSaveDate($data)">Date ...</span>

Elderberry

Answer 2

Try this:

dp.on('changeDate', function(e) {
    ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
    scope.$apply();
    scope.row.dueDate = e.format('MM dd, yyyy'); //<--- new line
});

Shabbir