Kendo Column Format Date
参考Kendo Demo 的 Grid -> Binding to local data 做测试时发现格式化Date类型时有几点要注意：
1.product.js为Kengo Grid提供数据源，代码如下：
var products = [{
ProductID : 1,
ProductName : "Chai",
UnitPrice : 18.0000,
UnitsInStock : 39,
Discontinued: false,
Birthday: new Date("1948/12/08 23:12"),
}, {
ProductID : 2,
ProductName : "Chang",
UnitPrice : 19.0000,
UnitsInStock : 17,
UnitsOnOrder : 40,
Discontinued: false,
Birthday: new Date(null),
}, {
ProductID : 3,
ProductName : "Aniseed Syrup",
UnitPrice : 10.0000,
UnitsInStock : 13,
Discontinued: false,
Birthday: null,
}, {
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
UnitPrice: 22.0000,
UnitsInStock: 53,
UnitsOnOrder: 0,
Discontinued: false,
}];
注意：
a).必须用new Date对象不能直接用"1948/12/08 23:12"否则就被视为字符串了，另外不能用”-“只能用”/"分开年月日；
b).创建一个空日期用null, 不要用 '' 或 new Date(null)， 当然像第4笔记录索性不要Birthday也可以；
<!DOCTYPE html>
<html>
<head>
<title>Binding to local data</title>
<link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../../styles/kendo.default.min.css" rel="stylesheet">
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.web.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<script src="../../content/shared/js/products.js"></script>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" },
Birthday: { type: "datetime"},
}
}
},
pageSize: 20
},
height: 430,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" },
{ field: "Birthday", width: "130px", format: '{0:yyyy-MM-dd}'}
]
});
});
</script>
</div>
</body>
</html>
注意：
格式化日期建议用format，当然也可以用template 例如：template: '#= kendo.toString(Birthday,"yyyy/MM/dd") #'。
template虽然灵活但如果为Birthday赋null什时，显示时真得出现”null"了, 要解决这个问题只能用：
template: "#= Birthday ? kendo.toString(new Date(Birthday), 'yyyy-MM-dd') : '' #" ，虽然有点罗嗦但总算将问题解决了。
3.运行效果图：
