Kendo Column Format Date_kendo grid column template format-CSDN博客

本文链接：https://blog.csdn.net/chelen_jak/article/details/19072003

参考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也可以；

2. local-data.html显示页面, 代码如上:

<!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.运行效果图：