JSFiddle - React, Tailwind, and code Playground

by yauhen

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table id="grid"></table>

JavaScript

var dataArr = [{id:1, name: 'steven', surname: "sanderson", startdate:'06/30/2013'}, {id:2, name: "valery", surname: "vitko", startdate: '07/27/2013'}, {id: 3, name: "John", surname: "Smith", startdate: '12/30/2012'}];

var datePick = function(elem)
{
   jQuery(elem).datepicker().change(function () { $(element)[0].triggerToolbar(); });
}

function fixSearchOperators()
{
      var columns = jQuery("#grid").jqGrid ('getGridParam', 'colModel');
        var gridContainer = $("#grid").parents(".ui-jqgrid");
        var filterToolbar = $("tr.ui-search-toolbar", gridContainer);
        
        filterToolbar.find("th").each(function()
        {
            var index = $(this).index();
            if(!(columns[index].searchoptions && columns[index].searchoptions.sopt && columns[index].searchoptions.sopt.length>1))
            {
                $(this).find(".ui-search-oper").hide();
            }
        })
}

$("#grid").jqGrid({
    data: dataArr,
    datatype: "local",
    localReader:
    {
        repeatitems: false,
        id: "id"
    },
    gridview: true,
    height: 'auto',
    hoverrows: false,
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'name',
        index: 'name',
        width: 70},
     {
        name: 'surname',
        index: 'surname',
        width: 100},
    {
        name: 'startdate',
        index: 'startdate',
        sorttype: "date",
        width: 90,
        searchoptions:{
            sopt: ['gt', 'eq'],
            dataInit: function(elem)
            {
                jQuery(elem).datepicker();
            }
        },
        formatoptions:
        {
            srcformat:'m/d/Y',
            newformat:'m/d/Y'
        }
        }
    ]
});

 $("#grid").jqGrid('filterToolbar', {
        searchOnEnter: false,
        ignoreCase: true,
        searchOperators: true });
fixSearchOperators();