Formatting a date retrieved from the database

[dchauhanParticipant]

In the database the string is as follows “29/07/2014 2:38:33.683 PM”.

I execute a stored procedure via jdbc to a sybase database in my java code I do the following:
String Creation_date = rs1.getString(“creationDate”);
– this returns a string in the format “2014-07-29 14:38:33.683”

Below is my code, however my grid doesnt display the date formatted correctly. It shows “2014-07-29 14:38:33.683”

I have been stuck on this for days now. Please help! Below is the code

queryList:[
{"available": false,"userName": "174861","queryType": "P ","businessModelName": "Branch Productivity","queryName": "Demo BP Chart","status": "N","reportType": "C","creationDate": "2014-07-29","updateDate": "2014-07-29","defaultReportFormat": "X","defaultReportFormatImg": "X"}]
 
        var QueryListData = new YAHOO.lang.JSON.parse(queryList);
 
        var QueryListDataSource =
                {
                    datatype: "json",
                    datafields: [
                        {name: 'available', type: 'bool'},
                        {name: 'userName', type: 'string'},
                        {name: 'queryType', type: 'string'},
                        {name: 'businessModelName', type: 'string'},
                        {name: 'queryName', type: 'string'},
                        {name: 'status', type: 'string'},
                        {name: 'creationDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f'},
                        {name: 'updateDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f'},
                        {name: 'reportType', type: 'string'},
                        {name: 'defaultReportFormat', type: 'string'},
                        {name: 'defaultReportFormatImg', type: 'string'}
                    ],
                    id: 'QueryListid',
                    localdata: QueryListData
                };
 
        QueryListSourceAdapter = new $.jqx.dataAdapter(QueryListDataSource);
 
 
    $(tagName).jqxGrid({
        source: QueryListSourceAdapter,
        columns: [
            {text: 'Select', menu: false, groupable: false, sortable: false, datafield: 'available', columntype: 'checkbox', width: 50},
            {text: 'queryType', dataField: 'queryType'},
            {text: 'Query Type', dataField: 'businessModelName', width: 150},
            {text: 'Report Name', groupable: false, dataField: 'queryName', width: 460},
            {text: 'Creation Date', dataField: 'creationDate', width: 200, cellsformat: 'D', filtertype: 'date'},
            {text: 'Update Date', dataField: 'updateDate', width: 200, cellsformat: 'dddd, MMMM dd, yyyy', filtertype: 'date'},
            {text: 'Report Format', dataField: 'reportType', width: 100, align: 'center', cellsalign: 'center',cellsrenderer: reportTypeRenderer},
            {text: 'User Name', dataField: 'userName', hidden: 'true'},
            {text: 'Default Report Format text', dataField: 'defaultReportFormat', hidden: 'true'}
        ]
    });

[dchauhanParticipant]

sorry this is the code

queryList:[
{"available": false,"userName": "174861","queryType": "P ","businessModelName": "Branch Productivity","queryName": "Demo BP Chart","status": "N","reportType": "C","creationDate": "2014-07-29 14:38:33.683","updateDate": "2014-07-29","defaultReportFormat": "X","defaultReportFormatImg": "X"}]
 
        var QueryListData = new YAHOO.lang.JSON.parse(queryList);
 
        var QueryListDataSource =
                {
                    datatype: "json",
                    datafields: [
                        {name: 'available', type: 'bool'},
                        {name: 'userName', type: 'string'},
                        {name: 'queryType', type: 'string'},
                        {name: 'businessModelName', type: 'string'},
                        {name: 'queryName', type: 'string'},
                        {name: 'status', type: 'string'},
                        {name: 'creationDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f'},
                        {name: 'updateDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f'},
                        {name: 'reportType', type: 'string'},
                        {name: 'defaultReportFormat', type: 'string'},
                        {name: 'defaultReportFormatImg', type: 'string'}
                    ],
                    id: 'QueryListid',
                    localdata: QueryListData
                };
 
        QueryListSourceAdapter = new $.jqx.dataAdapter(QueryListDataSource);
 
 
    $(tagName).jqxGrid({
        source: QueryListSourceAdapter,
        columns: [
            {text: 'Select', menu: false, groupable: false, sortable: false, datafield: 'available', columntype: 'checkbox', width: 50},
            {text: 'queryType', dataField: 'queryType'},
            {text: 'Query Type', dataField: 'businessModelName', width: 150},
            {text: 'Report Name', groupable: false, dataField: 'queryName', width: 460},
            {text: 'Creation Date', dataField: 'creationDate', width: 200, cellsformat: 'D', filtertype: 'date'},
            {text: 'Update Date', dataField: 'updateDate', width: 200, cellsformat: 'dddd, MMMM dd, yyyy', filtertype: 'date'},
            {text: 'Report Format', dataField: 'reportType', width: 100, align: 'center', cellsalign: 'center',cellsrenderer: reportTypeRenderer},
            {text: 'User Name', dataField: 'userName', hidden: 'true'},
            {text: 'Default Report Format text', dataField: 'defaultReportFormat', hidden: 'true'}
        ]
    });

[DimitarParticipant]

Hello dchauhan,

There is no need to parse such source data. Here is an example, based on your code, in which the date cell is formatted correctly:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var queryList = [{ "available": false, "userName": "174861", "queryType": "P ", "businessModelName": "Branch Productivity", "queryName": "Demo BP Chart", "status": "N", "reportType": "C", "creationDate": "2014-07-29 14:38:33.683", "updateDate": "2014-07-29", "defaultReportFormat": "X", "defaultReportFormatImg": "X"}]

            var QueryListDataSource =
                {
                    datatype: "array",
                    datafields: [
                        { name: 'available', type: 'bool' },
                        { name: 'userName', type: 'string' },
                        { name: 'queryType', type: 'string' },
                        { name: 'businessModelName', type: 'string' },
                        { name: 'queryName', type: 'string' },
                        { name: 'status', type: 'string' },
                        { name: 'creationDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f' },
                        { name: 'updateDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f' },
                        { name: 'reportType', type: 'string' },
                        { name: 'defaultReportFormat', type: 'string' },
                        { name: 'defaultReportFormatImg', type: 'string' }
                    ],
                    id: 'QueryListid',
                    localdata: queryList
                };

            var QueryListSourceAdapter = new $.jqx.dataAdapter(QueryListDataSource);

            var tagName = "#jqxgrid";

            $(tagName).jqxGrid({
                source: QueryListSourceAdapter,
                columns: [
                    { text: 'Select', menu: false, groupable: false, sortable: false, datafield: 'available', columntype: 'checkbox', width: 50 },
                    { text: 'queryType', dataField: 'queryType' },
                    { text: 'Query Type', dataField: 'businessModelName', width: 150 },
                    { text: 'Report Name', groupable: false, dataField: 'queryName', width: 460 },
                    { text: 'Creation Date', dataField: 'creationDate', width: 200, cellsformat: 'D', filtertype: 'date' },
                    { text: 'Update Date', dataField: 'updateDate', width: 200, cellsformat: 'dddd, MMMM dd, yyyy', filtertype: 'date' },
                    { text: 'Report Format', dataField: 'reportType', width: 100, align: 'center', cellsalign: 'center' },
                    { text: 'User Name', dataField: 'userName', hidden: 'true' },
                    { text: 'Default Report Format text', dataField: 'defaultReportFormat', hidden: 'true' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts