AngularJS-ng-grid-日期列问题
[英]AngularJS - ng-grid - Date Column issue
问题描述
我正在使用Angular ui-grid http://ui-grid.info/ 。 在编辑模式下，有一列Date of Birth需要DatePicker 。
当我单击该列时，它向我显示Date Picker但在日期选择器中未选择所选的日期值。 此外，完成版本后，Date Picker也不会被删除。
columnDefs: [
{ field: 'name' },
{
field: 'dob',
cellFilter: 'date',
enableCellEdit: true,
editableCellTemplate: '<input type="date" />'
}
谢谢
3 个解决方案
解决方案1
3 2015-01-05 05:30:31
您需要使用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" />'
},
...
]
解决方案2
1 2015-01-05 06:30:00
尝试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 }"> </div><div ng-cell></div></div>',
columnDefs: [
{
name: 'dob',
displayName: 'DOB',
cellFilter: 'date',
type: 'date'
},
{ name: 'name' , displayName: 'Name'}
]
}
}]);
解决方案3
1 2015-01-05 09:52:20
尝试将<input type="date" />放入指令中。 并在网格内使用指令。
我记得这对我有用。 NG-grid倾向于吞下某些事件，如果没有指令，则选择日期可能不起作用。
AngularJS ng-grid分页问题-未禁用按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.