Demo to Jerry Chen

by jerrychens

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  		<title>Jerry</title>
  		<!-- Library -->
  		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  		<!-- Grid -->
			<script src="https://cdn.rawgit.com/jashkenas/underscore/1.5.2/underscore.js"></script>
			<script src="https://cdn.rawgit.com/jashkenas/backbone/1.1.0/backbone.js"></script>
			<script src="https://cdn.rawgit.com/wyuenho/backbone-pageable/master/lib/backbone-pageable.js"></script>
			<script src="https://cdn.rawgit.com/wyuenho/backgrid/master/lib/backgrid.js"></script>
			<script src="https://cdn.rawgit.com/wyuenho/backgrid-filter/master/backgrid-filter.js"></script>
			<div id="main"></div>
		<!-- Your own codes -->
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="main.js"></script>
	</head>
	<body>
		<input type="text" id="startDate" placeholder="Enter a start date"></input>
		<input type="text" id="endDate" placeholder="Enter a end date"></input>
	</body>
</html>

CSS

#datepicker:hover {
	background-color: #d3d3d3;
}

.backgrid-container {
  position: relative;
  display: block;
  width: 100%;
  /* you may want to adjust this to fit a whole page */
  height: 494px;
  padding: 0;
  overflow: auto;
  border: 0;
}


/* Or maybe you enjoy zebra stripes */
.backgrid tbody tr:nth-child(even) {
  background-color: #d3d3d3;
}

JavaScript

$(document).ready(function () {
	$("#startDate").datepicker();
});

$(document).ready(function () {
	$("#endDate").datepicker();
});

var data = [
 {
   "outage": "2017/03/01",
   "feeder": 2693,
   "type": "OH",
   "category": "Bird/Animal",
   "long": 47.6093694,
   "lat": -122.3361862
 },
 {
   "outage": "2017/03/07",
   "feeder": 2780,
   "type": "UG",
   "category": "Equipment Failure",
   "long": 47.6147868,
   "lat": -122.3140487
 },
 {
   "outage": "2017/03/08",
   "feeder": 2739,
   "type": "OH",
   "category": "Trees/Wire Down",
   "long": 47.6049805,
   "lat": -122.3369622
 },
 {
   "outage": "2017/03/08",
   "feeder": 2746,
   "type": "OH",
   "category": "Bird/Animal",
   "long": 47.605213,
   "lat": -122.3371235
 },
 {
   "outage": "2017/03/09",
   "feeder": 2626,
   "type": "UG",
   "category": "Equipment Failure",
   "long": 47.6057834,
   "lat": -122.3375339
 },
 {
   "outage": "2017/03/14",
   "feeder": 2711,
   "type": "UG",
   "category": "Equipment Failure",
   "long": 47.6047692,
   "lat": -122.3369023
 },
 {
   "outage": "2017/03/14",
   "feeder": 4662,
   "type": "OH",
   "category": "Trees/Wire Down",
   "long": 47.60563629,
   "lat": -122.3369613
 },
 {
   "outage": "2017/03/16",
   "feeder": 2600,
   "type": "OH",
   "category": "Trees/Wire Down",
   "long": 47.6051199,
   "lat": -122.3370917
 },
 {
   "outage": "2017/03/16",
   "feeder": 2605,
   "type": "OH",
   "category": "Trees/Wire Down",
   "long": 47.6045413,
   "lat": -122.3374805
 },
 {
   "outage": "2017/03/16",
   "feeder": 2609,
   "type": "OH",
   "category": "Trees/Wire Down",
   "long": 47.6183684,
   "lat": -122.3118135
 }
]

var filterByDate = (ele) => {
	let outage = new Date(ele.outage)
	return startDate <= outage && outage <= endDate
}

//let sd = $("#startDate").val()
//let startDate = new Date(sd);
//let ed = $("#endDate").val()
//let endDate= new Date(ed);

let startDate = new Date("2017/03/01")
let endDate = new Date("2017/03/16")
let filteredData =...