JSFiddle - React, Tailwind, and code Playground

by gunjan_prmr

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.9/jquery.timepicker.css">
<link rel="stylesheet" href="https://ajax.googleapis.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.14.1/css/ui.jqgrid.min.css">
<table id="grid"></table>

CSS

#showCalendar {
	margin: 0px 2px;
	cursor: pointer;
}

JavaScript

$(function() {
  "use strict";

  $("#grid").jqGrid({
    colModel: [{ name: "StartRunTime", label: "Start Run Time", align: "center", sorttype: "time", 
    						 formatter: "time",
                 searchoptions: { dataInit: function(element) { $(element).timepicker(); } }
               },
      				 { label: "Concept Name",	name: "ConceptName", key: true,	width: 100, align: "center"
				       }],
    data: [{ StartRunTime: "12:00", ConceptName: "ABC" }],
    caption: ".jqGrid Test",
    multiselect: true,
  }).jqGrid('filterToolbar', {
    autoSearch: true
  });
  $(document).on("click", "#showCalendar", function(){
  	$("#gs_grid_StartRunTime").timepicker('show');
  });
  $('.ui-search-clear').before('<td><img id="showCalendar" src="https://jqueryui.com/resources/demos/datepicker/images/calendar.gif"></td>');
  
});