小编JDu*_*ubs的帖子

我有一个表,我想在该表中添加内联编辑.我开始使用ng-grid,然而,我认为虽然它运行良好,但我花了太多时间来修复样式,以便它与我网站的整体主题相匹配.我开始新鲜,我现在使用一个普通的旧html表与angularjs在幕后为其令人敬畏的双向数据绑定属性.

一切都进展顺利,除了一个事实,即我被困在试图让行内编辑与引导,日期选择器的工作:http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter.我使用这个日期选择器而不是xeditable说你应该使用的ui-bootstrap datepicker的原因是因为它在我的网站中看起来或感觉不对.这是ui-bootstrap datepicker的样子http://jsfiddle.net/NfPcH/23/.我喜欢bootstrap datepicker的简单外观.

这是一个带有可编辑和日期字段的表的plunker,可以尝试编辑PLUNKER

使用bootstrap-datepicker作为输入字段工作正常,使用自定义指令正确更新模型:

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();
            });
        });
    }
}

我更改了可编辑的源代码以使用bootstrap-datepicker(请参阅xeditable.js的第78-84行)

/*
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 …