error in sorting date in Jquery using method JqGrid()?

I am using JqGrid() for creating table,

I am sorting columns, when header is clicked. when I click on header, it sorts rows alphabetically, but my date is in format of 20-Jan-2018, and it sorts date-column alphabetically.

when I used $("#grid").tablesorter({dateFormat: "uk"}); it gave same output.

How can I sort it according to Month-name, without sorting alphabeting?

here is screenshot.

Here is my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js">
    </script>

    <script>
    $(function () {
        "use strict";
        $("#grid").jqGrid({
            defaults:{
                autoWidth:true,
            },
            width:550,

    colModel: [
        { name: "Item" },
        { name: "Purchase Date"},
    ],
            data: [
                { 
                    id: 10, 
                    "Item": "T-1234", 
                    "Purchase Date": "20-Jun-18",

                } ,
                { 
                    id: 20, 
                    "Item": "T-1235", 
                    "Purchase Date": "20-Feb-18",
                } ,
                { 
                    id: 30, 
                    "Item": "T-1236", 
                    "Purchase Date": "21-Jan-18",
                } ,
                { 
                    id: 40, 
                    "Item": "T-1237", 
                    "Purchase Date": "22-Mar-18",
                } ,
            ]
        });
    });



$(document).ready(function() 
    { 
        $("#grid").tablesorter( {sortList: [1,0]} ); 
    } 
);

$("#grid").tablesorter({dateFormat: "uk"});


    </script>

    <style type="text/css">
            .ui-jqgrid .ui-jqgrid-htable th div {
                height:auto;
                overflow:hidden;
                padding-right:4px;
                padding-top:10px;
                position:relative;
                vertical-align:text-top;
                white-space:normal !important;
            }
            .container{
                padding: 250px;
                padding-left: 350px;
            }
    </style>
</head>

<body>
    <div class="container">
        <table id="grid"></table>
    </div>
</body>
</html>

Solution

The below is valid only if your datatype is local or you have grid parameter loadonce : true

You do not need to use tablesorter plugin. You just need to define in date column the sorttype and datefmt in order to make this happen.

Again I note that this is valid only if your datatype is local or you have loadonce set to true. In case of server side sorting you will need to make your server side code to sort it correct.

colModel: [
    { name: "Item" },
    { name: "PurchaseDate", sorttype : 'date', datefmt: 'd-M-y' },
],

Another erro in your code is that the name property shouild not contain spaces as you post the demo. Suppose this is a label property.

With the above colModel setting your code work as expected.