Using bootstrap-datepicker with angular xeditable

angularjs, angularjs-directive, angularjs-ng-model, bootstrap-datepicker, x-editable

Solution

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>

Problem

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.

Original source