JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js-data/northwind"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<button type="button" id="clearFilter">Clear</button>
<button type="button" id="filterByDate">Filter by 12/05/2018</button>
<h1>UTC</h1>
<table id="gridUTC"></table>
<h1>Local</h1>
<table id="gridLOCAL"></table>

JavaScript

$(function () {
    	$('#gridLOCAL').igGrid({
				columns: [
					{headerText: 'Date', key: 'date', dataType: 'date', dateDisplayType: 'utc'}
				],
				dataSource: [
					{ 'date': '12-01-2018' },
					{ 'date': '12-01-2018' },
					{ 'date': '12-02-2018' },
					{ 'date': '12-03-2018' },
					{ 'date': '12-04-2018' },
					{ 'date': '12-05-2018' },
					{ 'date': '12-05-2018' },
					{ 'date': '12-06-2018' },
					{ 'date': '12-07-2018' },
					{ 'date': '12-08-2018' }
				],
				features: [
					{'name': 'Filtering'}
				]
			});
    
			$('#gridUTC').igGrid({
				columns: [
					{headerText: 'Date', key: 'date', dataType: 'date', dateDisplayType: 'local'}
				],
				dataSource: [
					{ 'date': '12-01-2018' },
					{ 'date': '12-01-2018' },
					{ 'date': '12-02-2018' },
					{ 'date': '12-03-2018' },
					{ 'date': '12-04-2018' },
					{ 'date': '12-05-2018' },
					{ 'date': '12-05-2018' },
					{ 'date': '12-06-2018' },
					{ 'date': '12-07-2018' },
					{ 'date': '12-08-2018' }
				],
				features: [
					{'name': 'Filtering'}
				]
			});
      
      $('#filterByDate').click(function () {
        $("#gridUTC").igGridFiltering("filter", [{ fieldName: 'date', expr: '12/05/2018', cond: 'on' }]);
        $("#gridLOCAL").igGridFiltering("filter", [{ fieldName: 'date', expr: '12/05/2018', cond: 'on' }]);
      });

      $('#clearFilter').click(function () {
        $("#gridUTC").igGridFiltering("filter", []);
        $("#gridLOCAL").igGridFiltering("filter", []);
      });
		});