使用带有角度 xeditable 的 bootstrap-datepicker

Posted 2023-05-07

【中文标题】使用带有角度 xeditable 的 bootstrap-datepicker

【英文标题】：Using bootstrap-datepicker with angular xeditable

【发布时间】：2014-08-28 08:16:10

【问题描述】：

我有一个表格，我想为该表格添加内嵌编辑。我从 ng-grid 开始，然而，我决定虽然它运行良好，但我花了太多时间尝试修复样式，以使其与我网站的整体主题相匹配。我从头开始，现在正在使用一个普通的旧 html 表，在幕后使用 angularjs，因为它具有令人敬畏的双向数据绑定属性。

除了我坚持尝试使用 bootstrap-datepicker 进行内联编辑之外，一切都进行得很顺利：http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter。我在 xeditable 说你应该使用的 ui-bootstrap 日期选择器上使用这个日期选择器的原因是因为它在我的网站上看起来或感觉不正确。这是 ui-bootstrap 日期选择器的样子 http://jsfiddle.net/NfPcH/23/。我喜欢 bootstrap datepicker 简单明了的外观。

这是一个带有 xeditable 和日期字段的表格的 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();
            );
        );
    

我将 xeditable 源代码更改为使用 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 form-control-inline input-sm" datepicker>'
     );
]);

，但是问题在于 xeditable 以及它如何更新所选行的模型。

xeditable 非常适合在线编辑文本和下拉菜单，但事实证明，尝试与 bootstrap-datepicker 集成是很困难的。

如果有其他方法可以通过 bootstrap-datepicker 使用内联编辑，我不会反对尝试一下。我在想，如果这不起作用，也许 ng-show 和 ng-hide 可能会起作用。

【问题讨论】：

不幸的是不是，但是，我知道我在 plunker 中的内容非常接近。我有一段时间没仔细看它了，但是如果您单击文本框以打开日历并使用箭头键导航并输入以选择日期，则可以正确更改模型。所以用鼠标选择日期是有问题的。这周晚些时候我会再看一遍。

你是对的，稍作改动可能会有所帮助。我想我有点让它工作，而不是使用 Render 方法使用链接方法和绑定属性。

【参考方案1】：

1 > 确保安装了两个库 - 角度可编辑 - 角度引导日期选择器

2> 创建新指令

/* 我为 xeditable 制作的新指令与 引导日期选择器 */

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

3> 在 HTML 中输入如下内容：

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

【参考方案2】：

试试这个：

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