jQuery UI Widgets › Forums › Grid › date Format

Tagged: , ,

This topic contains 4 replies, has 2 voices, and was last updated by  naatha 12 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    date Format Posts
  • March 15, 2013 at 12:51 pm date Format #17161

    naatha
    Member

    Hi,

    I have json date 29/03/2013

    But when i changed type:’date’ and cellsformat: ‘yyyy-MM-dd’, i am getting 2015-05-03.

    please help me

    March 15, 2013 at 1:00 pm date Format #17164

    Peter Stoev
    Keymaster

    Hi naatha,

    The reason is that your date is being parsed to JavaScript Date object doing the following: new Date(“29/03/2013”) which results in 2015-05-03.

    The solution is the following:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example shows how to create a Grid from JSON data.</title>
        <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/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.selection.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var url = "../sampledata/beverages.txt";
                var data = [{ "date": "29/03/2013" }];
                // prepare the data
                var source =
                {
                    localdata: data,
                    datatype: "json",
                    datafields: [
                        { name: 'date', type: 'date', format: "dd/MM/yyyy" }
                    ]
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    columns: [
                      { text: 'date', datafield: 'date', cellsformat: 'yyyy-MM-dd'}
                  ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid"></div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    March 15, 2013 at 1:20 pm date Format #17173

    naatha
    Member

    Hi Peter Stoev,

    It is working now…………..

    thanks you very much

    another question: Why showfilterrow: true is not working on IE 9.0?

    thanks

    March 15, 2013 at 1:29 pm date Format #17176

    Peter Stoev
    Keymaster

    Hi naatha,

    showfilterrow: true requires setting the filterable property to true. You may check our demo about Filter Row which shows how it should be implemented. This works in every browser.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    March 15, 2013 at 1:44 pm date Format #17178

    naatha
    Member

    Hi Peter Stoev,

    You are right. I didn’t set filterable property to true. It is working now…

    Can I set showfilterrow to false for selected columns?

    thanks you very much

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.