AngularJS - ng-grid - Date Column issue
Question
I am using Angular ui-grid http://ui-grid.info/ . There is one column Date of Birth which needs DatePicker when in edit mode.
When i click on the column it shows me Date Picker but the selected date value doesn't get selected in Date picker. Also also Date Picker doesn't get removed after edition is complete.
columnDefs: [
{ field: 'name' },
{
field: 'dob',
cellFilter: 'date',
enableCellEdit: true,
editableCellTemplate: '<input type="date" />'
}
Thanks
3 answers
solution1
3 2015-01-05 05:30:31
you need editableCellTemplate options in your columnDef to set the template depending on what datepicker plugin you are using. takinig ui-bootstrap as example (it's not viable until you prepare the scope variables)
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" />'
},
...
]
solution2
1 2015-01-05 06:30:00
try ui-grid which is a next generation ng-grid refactored by the same guys. it's well designed and loosely coupled by plugins:
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'}
]
}
}]);
solution3
1 2015-01-05 09:52:20
Try placing <input type="date" /> into a directive. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.