jQWidgets Forums

Tagged: dates parsing, jquery grid date parsing, jqxgrid

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

IE8 – NaN-NaN-0NaN Posts

November 26, 2012 at 2:37 pm IE8 – NaN-NaN-0NaN #11476

Grinchgfx

Participant

Hello,

In IE8 I get the following “NaN-NaN-0Nan” as date in my collumn “Birthdate”
In IE9 or Chrome i’m getting the right date

Is this a bug or something else?
I’m using jqwidgets 2.5

greetz
Grinch

November 26, 2012 at 2:52 pm IE8 – NaN-NaN-0NaN #11478

Peter Stoev

Keymaster

Hi Grinch,

This may happen, if you bind the Grid to a Date String which is not supported by the browser’s Javascript Date object. An example of such string is ‘\/Date(1350946800000+0100)\/’

The solution in such scenario is:

<!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.8.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = '[{ "AnoLectivo": 2012, "CodCurso": "5019", "CodRegime": "T", "myDate": "\/Date(1350946800000+0100)\/", "NomeCurso": "ENGENHARIA INFORMÁTICA (1º CICLO)", "NomeRegime": "Trabalhador Estudante", "Numero": 26385 }]';
            var source =
            {
                datatype: 'json',
                localdata: data,
                datafields: [
                    { name: 'AnoLectivo' },
                    { name: 'CodCurso' },
                    { name: 'CodRegime' },
                    { name: 'myDate'},
                    { name: 'NomeCurso' },
                    { name: 'NomeRegime' },
                    { name: 'Numero' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var gridLocalization = null;
            $('#jqxgrid').jqxGrid(
            {
                source: dataAdapter,
                theme: 'classic',
                ready: function()
                {
                    gridLocalization = $('#jqxgrid').jqxGrid('gridlocalization');
                },
                columns: [
                    { text: 'Ano Lectivo', datafield: 'AnoLectivo', width: 90 },
                    { text: 'Cod. Curso', datafield: 'CodCurso', width: 80 },
                    { text: 'Cod. Regime', datafield: 'CodRegime', width: 90 },
                    {
                        text: 'Data Inicio', datafield: 'myDate', width: 120, cellsformat: 'yyyy-MM-dd', cellsrenderer:
                        function(row, colum, value)
                        {
                            var jsonDateRE = /^\/Date\((-?\d+)(\+|-)?(\d+)?\)\/$/;
                            var arr = jsonDateRE.exec(value);
                            if (arr) {
                                // 0 - complete results; 1 - ticks; 2 - sign; 3 - minutes
                                var result = new Date(parseInt(arr[1]));
                                if (arr[2]) {
                                    var mins = parseInt(arr[3]);
                                    if (arr[2] === "-") {
                                        mins = -mins;
                                    }
                                    var current = result.getUTCMinutes();
                                    result.setUTCMinutes(current - mins);
                                }
                                if (!isNaN(result.valueOf())) {
                                    if (gridLocalization == null) gridLocalization = $('#jqxgrid').jqxGrid('gridlocalization');
                                    var date = $.jqx.dataFormat.formatdate(result, 'yyyy-MM-dd', gridLocalization);
                                    return '<span style="float: left; margin: 4px;">' + date + '</span>';
                                }
                            }
                            return "";
                        }
                    },
                    { text: 'Curso', datafield: 'NomeCurso', width: 320 },
                    { text: 'Regime', datafield: 'NomeRegime', width: 170 },
                    { text: 'Número', datafield: 'Numero', width: 70 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>