AngularJS-ng-grid-日期列问题

Question

I am using Angular ui-grid http://ui-grid.info/ . 我正在使用Angular ui-grid http://ui-grid.info/ 。 There is one column Date of Birth which needs DatePicker when in edit mode. 在编辑模式下，有一列Date of Birth需要DatePicker 。

When i click on the column it shows me Date Picker but the selected date value doesn't get selected in Date picker. 当我单击该列时，它向我显示Date Picker但在日期选择器中未选择所选的日期值。 Also also Date Picker doesn't get removed after edition is complete. 此外，完成版本后，Date Picker也不会被删除。

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

Thanks 谢谢

Answer 1

you need editableCellTemplate options in your columnDef to set the template depending on what datepicker plugin you are using. 您需要使用columnDef中的editableCellTemplate选项来设置模板，具体取决于您使用的日期选择器插件。 takinig ui-bootstrap as example (it's not viable until you prepare the scope variables) 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

try ui-grid which is a next generation ng-grid refactored by the same guys. 尝试ui-grid ，这是由同一个人重构的下一代ng-grid 。 it's well designed and loosely coupled by plugins: 它经过精心设计，并与插件松散耦合：

html: 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: 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

Try placing <input type="date" /> into a directive. 尝试将<input type="date" />放入指令中。 And use the directive inside the grid. 并在网格内使用指令。

I remember this has worked for me. 我记得这对我有用。 NG-grid tends to swallow certain events and selecting a date might not work if done without a directive. NG-grid倾向于吞下某些事件，如果没有指令，则选择日期可能不起作用。

AngularJS-ng-grid-日期列问题

问题描述

3 个解决方案

解决方案1
3 2015-01-05 05:30:31

解决方案2
1 2015-01-05 06:30:00

解决方案3
1 2015-01-05 09:52:20

AngularJS-ng-grid-日期列问题

问题描述

3 个解决方案

解决方案1 3 2015-01-05 05:30:31

解决方案2 1 2015-01-05 06:30:00

解决方案3 1 2015-01-05 09:52:20

解决方案1
3 2015-01-05 05:30:31

解决方案2
1 2015-01-05 06:30:00

解决方案3
1 2015-01-05 09:52:20