jQuery UI Widgets Forums Grid Time format does not work with 0's

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 10 years, 3 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Time format does not work with 0's #51577

    aoverton07
    Participant

    I have a a grid that is displaying some times that are pulled from my database and when there is a valid time present, the formatting works correctly (it also works, shows nothing, when the time value is NULL). However, when the time value is all 0’s (0000-00-00 00:00:00), the formatting is not applied. Ive attached a picture to illustrate what exactly is going on.

    Grid

    here are the column and datafield definitions for the grid:

    column:

    { text: "In", datafield: "time_in_1", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 },

    source/datafield:

    { name: 'time_in_1', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },

    • This topic was modified 10 years, 3 months ago by  aoverton07.
    Time format does not work with 0's #51696

    Dimitar
    Participant

    Hello aoverton07,

    Please share what is the format of your data source (XML, JSON, CSV, etc.) On our side, this scenario works, but the date is displayed as 12:00 AM.

    Best Regards,
    Dimitar

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

    Time format does not work with 0's #51773

    aoverton07
    Participant

    returned as string from mysql to php in format “0000-00-00 00:00:00”, echoed from php to javascript using json_encode();

    recieved as string in javascript as “0000-00-00 00:00:00”;

    Time format does not work with 0's #51805

    Dimitar
    Participant

    Hi aoverton07,

    Please share your source definition and grid initialization code.

    Best Regards,
    Dimitar

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

    Time format does not work with 0's #51861

    aoverton07
    Participant
    var detailSource = {
       url: '../phpDocs/someUrl.php',
       datatype: 'json',
       data: { action: 'timesheet_details', timesheetID: rowData.timesheet_id },
       datafields: [
    	  { name: 'timesheet_detail_id', type: 'string' },
    	  { name: 'timesheet_id', type: 'string' },
    	  { name: 'date', type: 'date' },
    	  { name: 'time_in_1', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
    	  { name: 'time_out_1', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
    	  { name: 'time_in_2', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
    	  { name: 'time_out_2', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
    	  { name: 'st_hours', type: 'string' },
    	  { name: 'ot_hours', type: 'string' },
    	  { name: 'dt_hours', type: 'string' }
      ]	
    };
    
    var detailAdapter = new $.jqx.dataAdapter(detailSource);
    
    $("#timesheetDetailsGrid").jqxGrid({
    	theme: theme,
            source: detailAdapter,
    	height: 203,
    	width: 665,
    	rowsheight: 25,
    	columnsresize: true,
    	columns: [
    		{ text: "detailID", datafield: 'timesheet_detail_id', hidden: true },
    		{ text: 'timesheetID', datafield: 'timesheet_id', hidden: true },
    		{ text: "Date", datafield: "date", columntype: 'datetimeinput', cellsalign: 'right', cellsformat: "ddd - MM-dd-yyyy", width: 150 },
    		{ text: "", width: 15 },
    		{ text: "ST", datafield: "st_hours", width: 40 },
    		{ text: "OT", datafield: "ot_hours", width: 40 },
    		{ text: "DT", datafield: "dt_hours", width: 40 },
    		{ text: "", width: 15 },
    		{ text: "In", datafield: "time_in_1", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 },
    		{ text: "Out", datafield: "time_out_1", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 },
    		{ text: "", width: 15 },
    		{ text: "In", datafield: "time_in_2", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 },
    		{ text: "Out", datafield: "time_out_2", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 }
    	]
    });
    Time format does not work with 0's #51904

    Dimitar
    Participant

    Hello aoverton07,

    We tested with the following example and there was no such issue:

    <!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/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/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/dates.txt";
    
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'in', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
                        { name: 'out', type: 'date', format: "yyyy-MM-dd HH:mm:ss" }
                    ],
                    id: 'id',
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    autoheight: true,
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [
                      { text: 'In', datafield: 'in', width: 250, cellsformat: "ddd - MM-dd-yyyy" },
                      { text: 'Out', datafield: 'out', minwidth: 120, cellsformat: "ddd - MM-dd-yyyy" }
                  ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    And here is the contents of dates.txt:

    [
        {
            "in": "0000-00-00 00:00:00",
            "out": "2014-03-11 10:00:00"
        },
        {
            "in": "2013-02-01 01:15:00",
            "out": "2015-08-11 10:00:00"
        }
    ]

    Please make sure that you are using the latest version of jQWidgets (3.2.2) and that your PHP file returns a correct JSON. If nothing helps, you may use cellsrenderer to display a custom value (e.g. “No info”) when a cell’s value is “0000-00-00 00:00:00”.

    Best Regards,
    Dimitar

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

    Time format does not work with 0's #51976

    aoverton07
    Participant

    Hmmm that’s strange because I copy and pasted that code into one of your jsfiddle pages, and the problem persists:

    http://jsfiddle.net/35kU5/45/

    grid

    • This reply was modified 10 years, 3 months ago by  aoverton07.
    Time format does not work with 0's #52012

    Dimitar
    Participant

    Hi aoverton07,

    The Date is Invalid and should be handled manually in your app, not by our component. Here is how to “mask” this value with a custom message:

    var zeroRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
        if (value == "0000-00-00 00:00:00") {
            return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">no date set</span>';
        };
    };
    
    $("#jqxgrid").jqxGrid(
    {
        width: 850,
        autoheight: true,
        source: dataAdapter,
        columnsresize: true,
        columns: [
            { text: 'In', datafield: 'in', width: 250, cellsformat: "ddd - MM-dd-yyyy", cellsrenderer: zeroRenderer },
            { text: 'Out', datafield: 'out', minwidth: 120, cellsformat: "ddd - MM-dd-yyyy" }
        ]
    });

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.