jQWidgets Forums

jQuery UI Widgets Forums Grid Problem with Datetime format

Tagged: 

This topic contains 7 replies, has 2 voices, and was last updated by  Syai 12 years, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Problem with Datetime format #17731

    Syai
    Participant

    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,
    Syai

    Problem with Datetime format #17742

    support
    Participant

    Hi Syai ,

    We are not able to reproduce the same output so please send us a sample, which demostrates your issue.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Problem with Datetime format #17746

    Syai
    Participant

    Hi 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,
    Syai

    Problem with Datetime format #17752

    support
    Participant

    Hi 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,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Problem with Datetime format #17756

    Syai
    Participant

    Hi 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.

    Issue with Date format

    Regards,
    Syai

    Problem with Datetime format #17759

    Syai
    Participant

    Hi 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,
    Syai

    Problem with Datetime format #17762

    support
    Participant

    Hi 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,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Problem with Datetime format #17765

    Syai
    Participant

    Hi 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

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

You must be logged in to reply to this topic.