jQWidgets Forums

Tagged: html grid, jquery grid date formatting, jqwidgets grid date formatting

This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 4 months ago.

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

Author

cellsformat not working for milliseconds Posts

January 20, 2014 at 12:17 pm cellsformat not working for milliseconds #48099

mukund

Participant

Hi,

I am facing this issue on firefox(26.0), I am setting cellsformat: “hh:mm:ss.sss” and data is 2011-06-21 22:19:23.001 it is not getting formatted. If i remove the millisecond part then it is working fine.

Thanks,
Mukund Tiwari

January 20, 2014 at 12:31 pm cellsformat not working for milliseconds #48100

Peter Stoev

Keymaster

Hi Mukund,

milliseconds should be formatted with “fff”. “ss” is for Seconds.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 20, 2014 at 1:04 pm cellsformat not working for milliseconds #48101

mukund

Participant

HI Peter,

I have also used hh:mm:ss.fff but it is still not getting formatted in firefox.

Regards,
Mukund Tiwari

January 20, 2014 at 1:28 pm cellsformat not working for milliseconds #48105

Peter Stoev

Keymaster

Hi Mukund,

Please, find below a working example:

<!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 () {
            // prepare the data
            var data = [{date: '2011-06-21 22:19:23.001'}];

            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                datafields:
                [
                    { name: 'date', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.fff' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                enabletooltips: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  {
                      text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', align: 'right', cellsalign: 'right', cellsformat: 'hh:mm:ss.fff'
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Hope this helps you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 21, 2014 at 8:50 am cellsformat not working for milliseconds #48147

mukund

Participant

Hi Peter,

Thanks for this working example. But here is my problem if i change this line { name: ‘date’, type: ‘date’, format: ‘yyyy-MM-dd HH:mm:ss.fff’ } to { name: ‘date’, type: ‘date’, format: ‘yyyy/MM/dd HH:mm:ss.fff’ } then cellsformat does not work in Firefox (works fine in Chrome). And if i remove millisecond from the value From -> [{date: ‘2011-06-21 22:19:23.001’}] To-> [{date: ‘2011-06-21 22:19:23’}] it works on firefox too.

Regards,
Mukund Tiwari

January 21, 2014 at 9:00 am cellsformat not working for milliseconds #48149

Peter Stoev

Keymaster

Hi Mukund,

I have sent you a working sample. Don’t spoil it. The datafield’s format setting is important and specifies the Date Format in your Data Source.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.