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.