Date Time formatting for Stackoverflow
http://stackoverflow.com/questions/14932359/kendoui-formatting-date-and-time-field
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<div id="testGrid"></div>
JavaScript
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
birthDates = [new Date(1359572145530), new Date(1354126487057), new Date(1351620177207), new Date(1349297049450), new Date(1349064294787), new Date(1348855911590), new Date(1348854507883), new Date(1347326235787), new Date(1347326222523), new Date(1347323408910), new Date(1347307745493), new Date(1345766316267), new Date(1345766277627), new Date(1345766209427), new Date(1345742673687)];
function createRandomData(count) {
var data = [],
now = new Date();
for (i = 0; i < count; i++) {
var id = i,
firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)];
data.push({
Id: id,
FirstName: firstName,
LastName: lastName,
DOB: birthDate
});
}
return data;
}
var columnDefinitions = [
{
field: "FirstName",
title: "First Name"},
{
field: "LastName",
title: "Last Name"},
{
field: "DOB",
title: "DOB",
template: "#= kendo.toString(DOB,'MM/dd/yyyy h:mm tt') #"
}];
var randomData = createRandomData(1000);
var gridDataSource = {
data: randomData,
pageSize: 100,
scrollable: { virtual: true }
};
function createGrid() {
$("#testGrid").html("").kendoGrid({
dataSource: gridDataSource,
columns: columnDefinitions,
pageable: {
pageSizes: true
},
sortable: {
mode: "single",
allowUnsort: true
}
});
}
$(document).ready(function() {
createGrid();
});