jqGrid with Working DateTimePicker & DatePicker

by gunjan_prmr

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/jquery.jqGrid.min.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<table id="gunjans_grid"></table>
<div id="pager"></div>
<div id="myDialogBox" title="Basic dialog">

CSS

.ui-jqgrid .ui-search-table .ui-search-input > input,
.ui-jqgrid .ui-search-table .ui-search-input > select,
.ui-jqgrid .ui-search-table .ui-search-input > img {
    vertical-align: middle;
    display: inline-block;
}

JavaScript

var mydata = 
  [
		  { BatchID: "1", Status: "Pending", StartRunDateTime: "7/12/2017", EndRunDateTime: "7/12/2017", 
        Action: "Cancel Delivery", JobID: "123", JobName: "Test", ConceptName: "CPK", StartDate: "7/12/2017", 
        EndDate: "7/12/2017", Frequency: "All", QueryLink: "Link", Submitter: "John Doe" 
      }
	],
    grid = jQuery("#gunjans_grid"),
    // DateTime Picker Add-On.
    initDateTimeWithButton = function (elem) {
        if (/^\d+%$/.test(elem.style.width)) {
            $(elem).css({
                width: "120px"
            });
        }
        setTimeout(function () {
            $(elem).datetimepicker({
                dateFormat: 'dd-mm-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,     
                buttonImageOnly: true,
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                buttonText: "Select date",            
                onSelect: function (dateText, inst) {
                    if (inst.id.substr(0, 3) === "gs_") {
                         grid[0].triggerToolbar();
                    }
                    else {
                        $(inst).trigger("change");
                    }
                }
            });
        }, 100);
    },
    //jQuery Date Picker.
   initDateWithButton = function (elem) {
        if (/^\d+%$/.test(elem.style.width)) {
            $(elem).css({
                width: "120px"
            });
        }
        setTimeout(function () {
            $(elem).datepicker({
                dateFormat: 'dd-mm-yy',
                showOn: 'button',
                changeYear: true,
                changeMonth: true,     
                buttonImageOnly: true,
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                buttonText: "Select date",            
                onSelect: function (dateText, inst) {
         ...