JSGrid Bootstrap DateTime Custom Field
HTML
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://raw.githubusercontent.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div id="jsGrid1"></div>
CSS
html,
body {
height: 100%;
}
JavaScript
var db = {
loadData: function(filter) {
return $.grep(this.users, function(user) {
return (!filter.Name || user.Name.indexOf(filter.Name) > -1);
});
},
insertItem: function(item) {
this.users.push(item);
},
deleteItem: function(item) {
var index = $.inArray(item, this.users);
this.users.splice(index, 1);
}
};
window.db = db;
db.users = [
{
"Account": "D89FF524-1233-0CE7-C9E1-56EFF017A321",
"Name": "Prescott Griffin",
"RegisterDate": "2011-02-22T05:59:55-08:00"
},
{
"Account": "06FAAD9A-5114-08F6-D60C-961B2528B4F0",
"Name": "Amir Saunders",
"RegisterDate": "2014-08-13T09:17:49-07:00"
},
{
"Account": "EED7653D-7DD9-A722-64A8-36A55ECDBE77",
"Name": "Derek Thornton",
"RegisterDate": "2012-02-27T01:31:07-08:00"
},
{
"Account": "2A2E6D40-FEBD-C643-A751-9AB4CAF1E2F6",
"Name": "Fletcher Romero",
"RegisterDate": "2010-06-25T15:49:54-07:00"
},
{
"Account": "3978F8FA-DFF0-DA0E-0A5D-EB9D281A3286",
"Name": "Thaddeus Stein",
"RegisterDate": "2013-11-10T07:29:41-08:00"
}
];
var MyDateField = function (config) {
jsGrid.Field.call(this, config);
};
jsGrid.fields.date = MyDateField;
$("#jsGrid1").jsGrid({
height: "90%",
width: "100%",
inserting: true,
filtering: true,
editing: true,
paging: true,
autoload: true,
controller: db,
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "RegisterDate", type: "date", width: 100, align: "center" }
]
});