Question

我正在使用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" />'
      }

由于

Answer 1

您需要在columnDef中使用editableCellTemplate个选项来根据您使用的datepicker插件设置模板。以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" />'
    },
    ...
]

Answer 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'}
    ]
  }
}]);

Answer 3

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

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

AngularJS - ng-grid - 日期列问题

3 个答案: