jQuery UI Widgets Forums Grid Datatype date displaying incorrect format

Tagged: ,

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

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

  • mr_putersmit
    Participant

    Hi

    I am struggling to display a datetime field in the grid correctly. It is showing as year first and not day first. In mysql, it a datetime field. I have tried various options that I sourced from the forum, but nothing seems to work. I have posted my code and would be grateful if someone could highlight my error. Thanks

    jQWidgets v3.2.2 (2014-Mar-21)

    var source =
                {
                    datatype: "json",
    			    datafields: [
    					 { name: 'id', type: 'string'},
    					 { name: 'date', type: 'date', format: 'dd-MM-yyyy HH:mm:ss.f'},
    					 { name: 'activity', type: 'string'},
    					 { name: 'user', type: 'string'},
    					 { name: 'item', type: 'string'}
                    ],
    				cache: false,
    				id: 'id',
                    url: 'temp/rtvData.php',           
                    updaterow: function (rowid, rowdata, commit) {
    			        // synchronize with the server - send update command
                        var data = "update=true&FirstName=" + rowdata.FirstName + "&LastName=" + rowdata.LastName + "&Title=" + rowdata.Title;
    					data = data + "&EmployeeID=" + rowid;
    					
    					$.ajax({
    						dataType: 'json',
    						url: 'temp/rtvData.php',
    						type: 'POST',
    						data: data,
    						success: function (data, status, xhr) {
    							// update command is executed.
    							commit(true);
    						}
    					});		
                    }
                };
    			
    			var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize the input fields.
                /* $("#activity").jqxInput({width: 150, height: 23});
                $("#user").jqxInput({width: 150, height: 23});
                $("#item").jqxInput({width: 150, height: 23}); */
            
                var dataAdapter = new $.jqx.dataAdapter(source);
                var editrow = -1;
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 740,
                    editable: true,
                    sortable: true,
                    filterable: true,
                    columnsresize: true,
                    columnsreorder: true,
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    altrows: true,
                    theme: 'custom',
                    columns: [
    				  { text: 'id', editable: false, datafield: 'id', width: 90 },
    				  { text: 'date', editable: false, datafield: 'date', cellsformat: 'D', filtertype: 'date', width: 190},
    				  { text: 'Activity', editable: false, datafield: 'activity', width: 100 },
    				  { text: 'User', editable: false, datafield: 'user', width: 160 },
    				  { text: 'Box', editable: false, datafield: 'item', width: 'auto' },
                      /* { text: 'Edit', datafield: 'Edit', width: 90, sortable: false, filterable: false, columntype: 'button', cellsrenderer: function () {
                         return "Edit";
    					 }, buttonclick: function (row) {
                         // open the popup window when the user clicks a button.
                         editrow = row;
                         var offset = $("#jqxgrid").offset();
                         $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 }, theme: 'custom' });
    
                         // get the clicked row's data and initialize the input fields.
                         var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                         $("#firstName").val(dataRecord.FirstName);
                         $("#lastName").val(dataRecord.LastName);
                         $("#title").val(dataRecord.Title);
                      
                         // show the popup window.
                         $("#popupWindow").jqxWindow('open');
                     }
                     } */
                    ]
                });

    rtvData.php

    {
        // SELECT COMMAND
    	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
    	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    		$act[] = array(
    			'id' => $row['id'],
    			'date' => $row['date'],
    			'activity' => $row['activity'],
    			'user' => $row['user'],
    			'item' => $row['item']
    		  );
    	}
    	 
    	echo json_encode($act);
    }

    Peter Stoev
    Keymaster

    Hi mr_putersmit,

    May be format: ‘dd-MM-yyyy HH:mm:ss.f’} is incorrect for your scenario. It is unknown from the posted code what kind of data you try to load in the Grid and how you try to load it.

    Best Regards,
    Peter Stoev

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


    mr_putersmit
    Participant

    Hi Peter
    I am not sure I understand your answer.

    It is unknown from the posted code what kind of data you try to load in the Grid and how you try to load it.

    The data I am loding is json and I have posted my php script that handles the json data. Or have I totally misunderstood your answer? Thanks


    Peter Stoev
    Keymaster

    Hi mr_putersmit,

    Your question is unclear. We cannot understand your app’s logic from the posted information and code. IF you’d like someone to try to help you then please provide much more explanation, including full example which someone can try locally with your JSON data or sample JSON data. We would not be able to provide a good answer when we cannot test your scenario, right.

    Best Regards,
    Peter Stoev

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


    mr_putersmit
    Participant

    Peter
    Ok. If I use the default grid as per your demos, using the northwind database, How would I display uk datetime format on the HireDate field. ie; 22-08-2014 15:36:23. The reason I ask is because I have tried various format, cellformat but nothing seems to work. So if I can see how I would format a datetime to display this way in a default grid, I can move on. Thanks


    Peter Stoev
    Keymaster

    Hi mr_putersmit,

    The cellsformat is used for formatting a Date object to a string of your choice as you can learn from the docs and examples and in all of them this works fine. Example: http://jsfiddle.net/qao4wqxn/. To learn how to bind the Grid, you may look at the Data Sources help topic in the documentation.

    Best Regards,
    Peter Stoev

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


    mr_putersmit
    Participant

    Hi Peter
    Thank you for that. In your example, you used js to generate the data. Should this example still work based on an mysql datetime field. Many thanks


    Peter Stoev
    Keymaster

    Hi mr_putersmit,

    Sometimes it is necessary to set the format setting of a datafield with type: “date” to specify your date format to match your data source’s date format. We have described that in the Grid’s help documentation.Unfortunately, I don’t know what kind of data you try to load( you did not post that) and I don’t know whether the format setting in your code is correct or not because we don’t what you try to load in the Grid. If you would like, please prepare and share a full sample so someone would be able to test your scenario.

    Best Regards,
    Peter Stoev

    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.