Grid Editing: Add a date property and date and time columns, with custom templates. Actually editing doesn't work, yet.

Author: jzaefferer

grid-editing/grid.html

@@ -6,6 +6,7 @@
 	<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
 	<link rel="stylesheet" href="../grid-spf/grid.css">
 	<script src="../jquery-1.6.2.js"></script>
+	<script src="../external/globalize.js"></script>
 	<script src="../external/jquery.tmpl.js"></script>
 	<script src="../external/jquery.mousewheel-3.0.4.js"></script>
 	<script src="../ui/jquery.ui.core.js"></script>
@@ -152,6 +153,8 @@ <h2>local data source</h2>
 			<th data-property="lastName">Last Name</th>
 			<th data-property="country" data-editor="countrycomplete">Country</th>
 			<th data-property="bitcoins" data-type="number" data-editor="spinner">Bitcoins</th>
+			<th data-template="#cell-date-tmpl">Date</th>
+			<th data-template="#cell-time-tmpl">Time</th>
 			<th data-property="random.value" data-type="number" data-editor="randomSpinner" data-editor-options='{"min":-1, "max": 125}'>Random</th>
 			<th data-template="#cell-edit-tmpl">Edit</th>
 			<th data-template="#cell-remove-tmpl">Remove</th>
@@ -181,6 +184,12 @@ <h2>local data source</h2>
 	<input type="text" name="${name}" placeholder="${label}" value="${value}" title="${label}" />
 {{/if}}
 </script>
+<script id="cell-date-tmpl" type="text/x-jquery-tmpl">
+	<td class="ui-widget-content">${Globalize.format(new Date(date), "d")}</td>
+</script>
+<script id="cell-time-tmpl" type="text/x-jquery-tmpl">
+	<td class="ui-widget-content">${Globalize.format(new Date(date), "T")}</td>
+</script>
 <script id="cell-edit-tmpl" type="text/x-jquery-tmpl">
 	<td class="ui-widget-content"><button class='edit'>Edit</button></td>
 </script>

grid-spf/developers.json

@@ -9,7 +9,8 @@
 		"random": {
 			"value": 10
 		},
-		"favorites": [1, 2, 3]
+		"favorites": [1, 2, 3],
+		"date": 174351600000
 	},
 	{
 		"firstName": "Scott",
@@ -21,7 +22,8 @@
 		"random": {
 			"value": 20
 		},
-		"favorites": [1, 2, 3]
+		"favorites": [1, 2, 3],
+		"date": 359468280000
 	},
 	{
 		"firstName": "Jörn",
@@ -33,7 +35,8 @@
 		"random": {
 			"value": 30
 		},
-		"favorites": [1, 2, 3]
+		"favorites": [1, 2, 3],
+		"date": 455083620000
 	},
 	{
 		"firstName": "Carl",
@@ -45,7 +48,8 @@
 		"random": {
 			"value": 40
 		},
-		"favorites": [1, 2, 3]
+		"favorites": [1, 2, 3],
+		"date": 174351700450
 	},
 	{
 		"firstName": "Adam",
@@ -57,7 +61,8 @@
 		"random": {
 			"value": 50
 		},
-		"favorites": [1, 2, 3]
+		"favorites": [1, 2, 3],
+		"date": 358368280045
 	},
 	{
 		"firstName": "Remy",
@@ -69,7 +74,8 @@
 		"random": {
 			"value": 60
 		},
-		"favorites": [1, 2, 3]
+		"favorites": [1, 2, 3],
+		"date": 274351715450
 	},
 	{
 		"firstName": "Benjamin",
@@ -81,7 +87,8 @@
 		"random": {
 			"value": 70
 		},
-		"favorites": [1, 2, 3]
+		"favorites": [1, 2, 3],
+		"date": 374351715450
 	},
 	{
 		"firstName": "Haymo",
@@ -93,6 +100,7 @@
 		"random": {
 			"value": 80
 		},
-		"favorites": [1, 2, 3]
+		"favorites": [1, 2, 3],
+		"date": 474351715450
 	}
 ]