jQuery Grid Date Formatting

by txhi

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id="jqxgrid"></div>

JavaScript

var data = '[{"date": "07/26/2017 03:38 PM EDT"}]';
// prepare the data
var source =
    {
      datatype: "json",
      datafields: [
        { name: 'date', type: 'date', format: 'MM/dd/yyyy hh:mm tt zzz' }
      ],
      localdata: data
    };
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid(
  {
    width: 350,
    source: dataAdapter,
    columns: [
      { 
        text: 'date', datafield: 'date', cellsformat: 'MM/dd/yyyy hh:mm tt zzz',
        cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
          var dateString = value.toString();
          var start = dateString.indexOf('(');
          var end = dateString.indexOf(')');
          var additional = dateString.substr(start, end);
					var formattedDate = dataAdapter.formatDate(new Date(value), 'MM/dd/yyyy hh:mm tt zzz');
          
          return '<div style="margin: 5px 0 0 5px;">' + formattedDate + ' ' + additional + '</div>';
        }   
      }
    ]
  });