igGrid - date/time custom text filter

by georgianastasov

HTML

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

<label>Switch Filtering Mode:</label>
	<br />
	<input type="text" id="filterType"></input>
	<table id="gridSimpleFiltering"></table>
	<br />

JavaScript

$(function () {

			var f = true, ds, schema;

      //grid data shema
			schema = new $.ig.DataSchema("array", {
				fields: [
					{ name: "FirstName", type: "string" },
					{ name: "LastName", type: "string" },
					{
						name: "RegistererDate", type: "date", formatter: function (value, record) {
							return value.toLocaleDateString();
						}
					},
					{ name: "Country", type: "string" },
					{ name: "Age", type: "number" },
          { name: "IsActive", type: "bool" },
          { name: "RegistererTime" }
				],
			});
      
      //data source of the grid
			ds = new $.ig.DataSource({
				dataSource: employees,
				schema: schema,
				filtering: {
					type: "local"
				}
			}).dataBind();

			//selet filter mode
			$("#filterType").igCombo({
				mode: "dropdown",
				textKey: "text",
				valueKey: "value",
				dataSource: [
					{ value: "Simple Filtering", text: "Simple Filtering" },
					{ value: "Search By Text", text: "Search By Text" }
				],
				initialSelectedItems : [
					{ value: "Simple Filtering" }
				],
				selectionChanged: function (evt, args) {
					f = args.items[0].data.value === "Simple Filtering";
					createSimpleFilteringGrid(f, ds);
				}
			});
			$(document).delegate("#gridSimpleFiltering", "igcontrolcreated", function (evt, args) {
				if (!f) {
					createSearchField(args.owner, ds);
				}
			});
			createSimpleFilteringGrid(f, ds);
		});
    
    //create the search field
		function createSearchField(grid, ds) {
			var upperPager = grid.container().find(".ui-iggrid-pagesizedropdowncontainerabove"),
				field = $('<input id="filterByText" />');

			upperPager.prepend(field);
			field.igTextEditor({
				placeHolder: "Filter...",
				height: "22px",
        //on text change filter
				textChanged: function (evt, args) {
        //filter only the two date/time oclumns
					ds.filterByText(args.text,[{name: "RegistererDate", type: "string"},{name: "RegistererTime", type: "string"}]);
					$(grid.element).igGrid("option",...