we are trying to use the grid to show and edit dates with editor
1. our raw DB will returns UTC date format when queried, e.g. "2014-01-26T10:32:28"
2. although we set the datatype to "date" in column model, the date do not auto fomat itself, it just show out the whole UTC date like a string, so we add a renderer to format the date to dd/MM/yyyy
3. to let users to use datepicker when changing the date, we further add a datepicker to the editor in column model.
and when we double click the cell, the date-picker shown and works without any problems.
however, we find that the input box of the datepicker is still the UTC date "before" the rendered value, it just show out the word "2014-01-26T10:32:28".
we further make another column NOT using the datepicker editor, the result is the same, the changable div is showing "2014-01-26T10:32:28" too.
attached the screen and code
@using WebMatrix.Data;
@{
if(Request["action"]=="data")
{
var xdatatoshow = @"[{""rank"":1, ""company"":""Exxon Mobil"",""revenues"": ""339,938.0"",""profits"": ""36,130.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":2, ""company"":""Wal-Mart Stores"",""revenues"": ""315,654.0"", ""profits"":""11,231.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":3, ""company"":""Royal Dutch Shell"", ""revenues"":""306,731.0"", ""profits"":""25,311.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":4, ""company"":""BP"", ""revenues"":""267,600.0"",""profits"": ""22,341.0"", ""date"": ""2014-01-26T10:32:28""},{""rank"":5, ""company"": ""General Motors"",""revenues"": ""192,604.0"", ""profits"":""-10,567.0"", ""date"": ""2014-01-26T10:32:28""}]";
@Html.Raw(xdatatoshow)
}
else
{
<html lang="en">
<head>
<link rel="stylesheet" href="./pqgrid/jquery-ui.css">
<script type="text/javascript" async="" src="./pqgrid/ga.js"></script>
<script src="./pqgrid/jquery-2.0.3.min.js"></script>
<script src="./pqgrid/jquery-ui.min.js"></script>
<script type="text/javascript" src="./pqgrid/shCore.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushJScript.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushxml.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushcSharp.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushcss.js"></script>
<script type="text/javascript" src="./pqgrid/shBrushphp.js"></script>
<link type="text/css" rel="stylesheet" href="./pqgrid/shCoreDefault.css">
<link type="text/css" rel="stylesheet" href="./pqgrid/syntaxhighlighter.css">
<link rel="stylesheet" href="./pqgrid/pqgrid.min.css">
<script src="./pqgrid/touch-punch.js"></script>
<script src="./pqgrid/pqgrid.min.js"></script>
<script src="./pqgrid/localize/pq-localize-zh.js"></script>
<script src="./pqgrid/localize/pq-localize-es.js"></script>
<script src="./pqgrid/localize/pq-localize-it.js"></script>
<script src="./pqgrid/localize/pq-localize-ja.js"></script>
<script src="./pqgrid/localize/pq-localize-hu.js"></script>
<script src="./pqgrid/localize/pq-localize-nl.js"></script>
<script src="./pqgrid/localize/pq-localize-de.js"></script>
</head>
<body>
<div id="TESTGRID1"></div>
<script>
var dateEditor = function (ui) {
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
cls = ui.cls,
dc = $.trim(rowData[dataIndx]);
$cell.css('padding', '0');
var $inp = $("<input type='text' id='" + dataIndx + "' name='" + dataIndx + "' class='" + cls + " pq-date-editor' style='position: relative; z-index: 100;border: 3px solid rgba(0,0,0,0);'/>")
.appendTo($cell)
.val(dc).datepicker({
changeMonth: true,
changeYear: true,
dateFormat:"dd/mm/yy",
onClose: function () {
$inp.focus();
}
});
}
var dataM = {
location: "remote"
,sorting: "remote"
,paging: "local"
,dataType: "JSON"
,method: "POST"
,getData: function (dataJSON) {var data = dataJSON; return {data: data };}
,url: "g_grid_test2.cshtml?action=data"
,recIndx:"rank"
};
var obj = {
width:1200,
height:150,
editable: true,
title:"Checkbox selections",
selectionModel: { type: 'none' },
minWidth: 30,
colModel:
[
{ title: "Rank", width: 100, dataType: "integer",dataIndx:"rank"},
{ title: "Company", width: 200, dataType: "string", dataIndx:"company"},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"revenues" },
{ title: "Profits ($ millions)", width: 150, dataType: "float", align: "right", dataIndx:"profits" },
{ title: "Date", dataIndx: "date", width: 150, align: "center", dataType: "date", resizable: false
,render: function (ui) {
if (ui.cellData==null)
{
return '';
}
else
{
console.log(ui.cellData);
var date = new Date(ui.cellData);
var xdd = date.getDate();
var xmm = (date.getMonth() + 1);
var xyy = date.getFullYear();
if (parseInt(xdd)<10){xdd='0'+xdd;}
if (parseInt(xmm)<10){xmm='0'+xmm;}
return xdd + '/' + xmm + '/' + xyy;
}
}
,editor: {type: dateEditor}
},
{ title: "Date2", dataIndx: "date", width: 150, align: "center", dataType: "date", resizable: false
,render: function (ui) {
if (ui.cellData==null)
{
return '';
}
else
{
console.log(ui.cellData);
var date = new Date(ui.cellData);
var xdd = date.getDate();
var xmm = (date.getMonth() + 1);
var xyy = date.getFullYear();
if (parseInt(xdd)<10){xdd='0'+xdd;}
if (parseInt(xmm)<10){xmm='0'+xmm;}
return xdd + '/' + xmm + '/' + xyy;
}
}
}
],
dataModel: dataM
,type: dateEditor
};
var $grid = $("#TESTGRID1").pqGrid(obj);
</script>
</body>
</html>
}
}
