JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.css">
<link rel="stylesheet" href="//rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="//rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<div class="container">
    <table id="categorysummary"></table>
</div>

CSS

.ui-search-table input[type=date] {
	line-height: normal;
}

JavaScript

var serverResponse = {
        "page": "1",
        "records": "3",
        "rows": [
            { "Id": "1", IsActive: "2015-01-09" },
            { "Id": "2", IsActive: "2015-01-05" },
            { "Id": "3", IsActive: "2015-01-21" }
        ]
    },    
	dateTemplate = {
		sorttype: "date",
		formatter: "date",
		formatoptions: {
			srcformat: "Y-m-d",
			reformatAfterEdit: true
		},
		autoResizing: { minColWidth: 50 },
		autoResizable: true,
		width: 100,
		editoptions: {
			maxlength: 10,
			size: 10
		},
		editable: true,
		searchoptions: {
			sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
			size: 10,
			clearSearch: false,
			attr: { size: 10, type: "date", style: "width:11em;" }
		}
	},
    $grid = $("#categorysummary"),
	adjustSearchingDateField = function (cmName, newWidth) {
	    var $searchingField = $("#gs_" + $.jgrid.jqID(cmName));
	    if ($searchingField.attr("type") === "date") {
		    $searchingField.width(newWidth - 7); // - padding
		}
	};

$grid.jqGrid({
    url: "/echo/json/",
    datatype: "json",
    mtype: "POST",
    postData: {
        json: JSON.stringify(serverResponse)
    },
    colNames: ["Active", "Second"],
    colModel: [
        { name: "IsActive", template: dateTemplate },
        { name: "Second", width: 85 }
    ],
	resizeStop: function (newWidth, iCol) {
		var colModel = $(this).jqGrid("getGridParam", "colModel");
		adjustSearchingDateField(colModel[iCol].name, newWidth);
	},
	afterResizeDblClick: function (options) {
		adjustSearchingDateField(options.cmName, options.cm.width);
	},
    jsonReader: {
        id: "Id",
        repeatitems: false
    },
    viewrecords: true
}).jqGrid("filterToolbar");
$(".ui-search-table input[type=date]").each(function() {
    $(this).css("width", $(this).closest("th.ui-th-column").width() + "px");
});