jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Problem with Datetime format
Tagged: jqxgrid
This topic contains 7 replies, has 2 voices, and was last updated by Syai 12 years, 4 months ago.
-
Author
-
Hi,
I’m working on the datetimeinput in grid. Here I’m trying to apply the culture. The culture is getting applied. But when I click on the cell, the date time control has to consider the date as “dd/MM/yyyy” format but it is considering as “MM/dd/yyyy”. I’m giving input as “dd/MM/yyyy” format itselft. Can anyone help me on this.Regards,
SyaiHi Syai ,
We are not able to reproduce the same output so please send us a sample, which demostrates your issue.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi Mariya,
Below is the code I’m using. I’ve added the required js file references to the page. Could you please verify and let me know if I miss anything.<h2> TestPageJQGrid</h2><!DOCTYPE html><html lang="en"><head> <title id='Description'>This example demostrates how we can manipulate data at client side. The Grid plugin provides you callback functions when you add, remove or update a row. </title> <script type="text/javascript"> $(document).ready(function () { var theme ='office'; // prepare the data var data = {}; var firstNames =["Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"]; var lastNames = ["Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson","Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"]; var productNames = ["Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino","Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"]; var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"]; var dateValues = ["31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012"] var generaterow = function (i) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var quantity = 1 + Math.round(Math.random() * 10); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["Date"] = dateValues[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; return row; } for (var i = 0; i < 10; i++) { var row = generaterow(i); data[i] = row; } var source ={ localdata: data, datatype: "local", datafields: [{ name: 'firstname', type: 'string' },{ name: 'lastname', type: 'string' },{ name: 'productname', type: 'string' },{ name: 'quantity', type: 'number' },{ name: 'price', type: 'number' },{ name: 'total', type: 'number' },{ name: 'Date', type: 'date' }], addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command // call commit with parameter true if the synchronization with the server is successful //and with parameter false if the synchronization failed. // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB. commit(true); }, deleterow: function (rowid, commit) { // synchronize with the server - send delete command // call commit with parameter true if the synchronization with the server is successful //and with parameter false if the synchronization failed. commit(true); }, updaterow: function (rowid, newdata, 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 failed. commit(true); }}; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 500, height: 350, pageable: true, source: dataAdapter, autoheight: true, theme: theme, editable: true, columns: [{ text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Date', datafield: 'Date', width: 100, columntype: 'datetimeinput', width: 90, align: 'center', cellsalign: 'right', cellsformat: 'd', formatString: "dd/MM/yyyy", createeditor: function (row, cellvalue, editor) { editor.jqxDateTimeInput({ culture: 'fr-FR' }); } }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' } ] }); $("#addrowbutton").jqxButton({ theme: theme }); $("#addmultiplerowsbutton").jqxButton({ theme: theme }); $("#deleterowbutton").jqxButton({ theme: theme }); $("#updaterowbutton").jqxButton({ theme: theme }); // update row. $("#updaterowbutton").on('click', function () { var datarow = generaterow(); var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow); $("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex); } }); // create new row. $("#addrowbutton").on('click', function () { var datarow = generaterow(); var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow, 'top'); $('#jqxgrid').jqxGrid('gotopage', -1); }); // create new rows. $("#addmultiplerowsbutton").on('click', function () { // $("#jqxgrid").jqxGrid('beginupdate'); for (var i = 0; i < 10; i++) { var datarow = generaterow(); var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow); } // $("#jqxgrid").jqxGrid('endupdate'); }); // delete row. $("#deleterowbutton").on('click', function () { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); var commit = $("#jqxgrid").jqxGrid('deleterow', id); } }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div style="float: left;" id="jqxgrid"> </div> <div style="margin-left: 10px; float: left;"> <div> <input id="addrowbutton" type="button" value="Add New Row" /> </div> <div style="margin-top: 10px;"> <input id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" /> </div> <div style="margin-top: 10px;"> <input id="deleterowbutton" type="button" value="Delete Selected Row" /> </div> <div style="margin-top: 10px;"> <input id="updaterowbutton" type="button" value="Update Selected Row" /> </div> </div> </div></body></html>
If you observe the above code, I’m passing the array of “dateValues” to the grid and I’ve declared the type as date in the source.
Regards,
SyaiHi Syai,
Thank you for the provided sample.
Here is the solution:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example demostrates how we can manipulate data at client side. The Grid plugin provides you callback functions when you add, remove or update a row. </title> <script type="text/javascript"> $(document).ready(function () { var theme = 'office'; // prepare the data var data = {}; var firstNames =["Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"]; var lastNames = ["Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson","Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"]; var productNames = ["Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino","Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"]; var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"]; var dateValues = ["31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012"] var generaterow = function (i) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var quantity = 1 + Math.round(Math.random() * 10); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["Date"] = dateValues[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; return row; } for (var i = 0; i < 10; i++) { var row = generaterow(i); data[i] = row; } var source ={ localdata: data, datatype: "local", datafields: [{ name: 'firstname', type: 'string' },{ name: 'lastname', type: 'string' },{ name: 'productname', type: 'string' },{ name: 'quantity', type: 'number' },{ name: 'price', type: 'number' },{ name: 'total', type: 'number' },{ name: 'Date', type: 'date' } ], addrow: function (rowid, rowdata, position, commit) { // synchronize with the server - send insert command // call commit with parameter true if the synchronization with the server is successful //and with parameter false if the synchronization failed. // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB. commit(true); }, deleterow: function (rowid, commit) { // synchronize with the server - send delete command // call commit with parameter true if the synchronization with the server is successful //and with parameter false if the synchronization failed. commit(true); }, updaterow: function (rowid, newdata, 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 failed. commit(true); }}; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 500, height: 350, pageable: true, source: dataAdapter, autoheight: true, theme: theme, editable: true, columns: [{ text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Date', datafield: 'Date', width: 100, columntype: 'datetimeinput', width: 90, align: 'center', cellsalign: 'right', cellsformat: "dd/MM/yyyy", createeditor: function (row, cellvalue, editor) { editor.jqxDateTimeInput({ culture: 'fr-FR' }); } }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' } ] }); $("#addrowbutton").jqxButton({ theme: theme }); $("#addmultiplerowsbutton").jqxButton({ theme: theme }); $("#deleterowbutton").jqxButton({ theme: theme }); $("#updaterowbutton").jqxButton({ theme: theme }); // update row. $("#updaterowbutton").on('click', function () { var datarow = generaterow(); var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow); $("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex); } }); // create new row. $("#addrowbutton").on('click', function () { var datarow = generaterow(); var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow, 'top'); $('#jqxgrid').jqxGrid('gotopage', -1); }); // create new rows. $("#addmultiplerowsbutton").on('click', function () { // $("#jqxgrid").jqxGrid('beginupdate'); for (var i = 0; i < 10; i++) { var datarow = generaterow(); var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow); } // $("#jqxgrid").jqxGrid('endupdate'); }); // delete row. $("#deleterowbutton").on('click', function () { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); var commit = $("#jqxgrid").jqxGrid('deleterow', id); } }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div style="float: left;" id="jqxgrid"> </div> <div style="margin-left: 10px; float: left;"> <div> <input id="addrowbutton" type="button" value="Add New Row" /> </div> <div style="margin-top: 10px;"> <input id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" /> </div> <div style="margin-top: 10px;"> <input id="deleterowbutton" type="button" value="Delete Selected Row" /> </div> <div style="margin-top: 10px;"> <input id="updaterowbutton" type="button" value="Update Selected Row" /> </div> </div> </div></body></html>
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi Mariya,
This didn’t resolve my problem. If you observe the image I’ve attached, here the date is parsed wrongly. The dates I’m giving input as “31/12/2012” (31st December 2012). But it is converting it as “12/07/2012” (12th July 2012) which is wrong conversion.Regards,
SyaiHi Mariya,
I’ve given the date format in the source as “MM/dd/yyyy”, then it is working fine. Is it necessary to give the date format as “MM/dd/yyyy” ?Regards,
SyaiHi Syai,
You can change the following thing: { name: ‘Date’, type: ‘date’, format: ‘dd/MM/yyyy’ }. I hope that it will work as expected.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi Mariya,
This worked fine. Let me confirm, if we cannot give format as “dd/MM/yyyy”, will it take “MM/dd/yyyy” as default format?Regards,
Syai -
AuthorPosts
You must be logged in to reply to this topic.