AngularJS - ng-grid - 日期列问题答案

【问题标题】：AngularJS - ng-grid - Date Column issueAngularJS - ng-grid - 日期列问题
【发布时间】：2015-01-05 04:13:51
【问题描述】：

UPDATED DEMO

我正在使用 Angular ui-grid http://ui-grid.info/。在编辑模式下有一列Date of Birth 需要DatePicker。

当我单击该列时，它会显示Date Picker，但在日期选择器中未选择选定的日期值。版本完成后，日期选择器也不会被删除。

columnDefs: [
      { field: 'name' },
      {
        field: 'dob',
        cellFilter: 'date',
        enableCellEdit: true,
        editableCellTemplate: '<input type="date" />'
      }

谢谢

【问题讨论】：

可能重复-stackoverflow.com/questions/20983948/…
我检查了链接，那里没有完美的答案..！

标签： javascript jquery angularjs datepicker ng-grid

【解决方案1】：

您需要在您的 columnDef 中使用editableCellTemplate 选项来设置模板，具体取决于您使用的日期选择器插件。以 takinig ui-bootstrap 为例（在你准备好范围变量之前它是不可行的）

columnDefs: [
    { field: 'name' },
    {
        field: 'dob',
        cellFilter: 'date',
        enableCellEdit: true,
        editableCellTemplate: '<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="\'2015-06-22\'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />'
    },
    ...
]

【讨论】：

好吧，因为ng-grid 有点乱，将被它的革命版本ui-grid 取代，我强烈建议你改用ui-grid。我将为ui.grid附上另一个答案
大量编码正在完成..无法替换ui-grid..！！有什么解决办法吗？
我是一个深度 ng-grid 用户，处理可编辑字段会涉及很多工作，您可能需要为原生 html datepicker 编写指令来处理焦点状态和使用 @ 987654329@ 绑定所选日期。此外，当你有 pinning 功能和超过 20 列时，你会觉得使用 ng-grid 很痛苦......

【解决方案2】：

试试ui-grid，这是由同一个人重构的下一代ng-grid。它设计精良，通过插件松耦合：

html:

<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
        <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
        <div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
    </body>
</html>

js:

var app = angular.module('myApp', ['ui.grid', 'ui.grid.edit']);

app.controller('MyCtrl', ['$scope', function($scope) {
  $scope.myData = [{name: "Moroni", dob: '1985-01-01'},
                 {name: "Tiancum", dob: '1956-11-21'},
                 {name: "Jacob", dob: '1980-03-08'},
                 {name: "Nephi", dob: '1974-08-08'},
                 {name: "Enos", dob: '1991-07-17'}];

  $scope.gridOptions = {
    data: 'myData',
    // rowTemplate: '<div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" style="overflow: visible"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>',
    columnDefs: [
      {
        name: 'dob',
        displayName: 'DOB',
        cellFilter: 'date',
        type: 'date'

      },
      { name: 'name' , displayName: 'Name'}
    ]
  }
}]);

【讨论】：

【解决方案3】：

尝试将<input type="date" /> 放入指令中。并使用网格内的指令。

我记得这对我有用。 NG-grid 倾向于吞下某些事件，如果没有指令，选择日期可能不起作用。

【讨论】：