JSON Date Range Filter
To show that jquery can be used to filter json data based on specified date ranges
HTML
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<link rel="stylesheet" href="https://materializecss.com/templates/starter-template/css/style.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="https://materializecss.com/templates/starter-template/js/init.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>JSON - Date Range Filter Concept</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../../dist/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">JSON Date Range Filter</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li><a href="#">Home</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
<div class="container">
<div class="section">
<!-- Raw Data Section -->
<div class="row">
<div class="col s12">
<div class="icon-block">
<h4 class="center">Raw Data <small id="count_RawData">(0)</small></h4>
<pre...
CSS
#count_RawData {
color: #89cbfa;
}
#view_rawData,
#view_filteredData {
min-height: 50px;
max-height: 700px;
overflow-y: scroll;
width: 100%;
box-shadow: 0 0 5px #cfcfcf;
border-radius: 5px;
border: none;
}
#count_FilteredData {
color: #498e88;
}
#filter-button {
width: 100%;
}
#filter_section {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 20px;
/* background-color: #f1f1f1; */
border: 1px solid #cfcfcf;
}
/*Curtosy of the fellow fiddler's code: http://jsfiddle.net/unLSJ/*/
pre {
background-color: ghostwhite;
border: 1px solid silver;
padding: 10px 20px;
margin: 20px;
}
.json-key {
color: brown;
}
.json-value {
color: navy;
}
.json-string {
color: olive;
}
/*Update the scrollbar*/
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 10px rgb(255, 255, 255);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(132, 144, 154);
}
JavaScript
/*Dummy Data, Curtosy of: https://www.generatedata.com/*/
var dataDates = [{
"date": "Nov 28, 2017",
"name": "Samuel A. Kidd",
"email": "dui.nec@sapienimperdietornare.ca",
"address": "944-343 Nec Avenue"
},
{
"date": "May 20, 2015",
"name": "Jenna R. Alston",
"email": "semper.auctor.Mauris@acrisus.edu",
"address": "5316 Mollis Av."
},
{
"date": "Mar 11, 2018",
"name": "Magee K. Mcfarland",
"email": "Maecenas@egetmollis.co.uk",
"address": "Ap #605-1298 Id Rd."
},
{
"date": "Dec 9, 2016",
"name": "Claudia V. Campbell",
"email": "Donec@semegestas.ca",
"address": "Ap #935-7909 Lectus Rd."
},
{
"date": "Aug 4, 2015",
"name": "Steven V. Reynolds",
"email": "est.ac@ut.net",
"address": "Ap #501-8119 Vel, Rd."
},
{
"date": "Mar 25, 2019",
"name": "Amy O. Bean",
"email": "risus.quis.diam@adipiscingelitEtiam.org",
"address": "1855 Euismod Ave"
},
{
"date": "Jan 12, 2019",
"name": "Quintessa H. Clay",
"email": "arcu.Sed.eu@variusNam.net",
"address": "P.O. Box 127, 812 Lobortis Rd."
},
{
"date": "Feb 7, 2015",
"name": "Marvin P. Golden",
"email": "pellentesque@lobortistellusjusto.org",
"address": "P.O. Box 936, 8921 Augue Av."
},
{
"date": "Aug 4, 2015",
"name": "Shay Z. Clayton",
"email": "sem.egestas@maurisidsapien.org",
"address": "5862 Pede St."
},
{
"date": "Feb 12, 2015",
"name": "Jin G. Jimenez",
"email": "dictum.magna@parturientmontes.org",
"address": "4310 Malesuada Av."
},
{
"date": "Feb 10, 2017",
"name": "Dawn R. Blackwell",
"email": "risus.varius.orci@ipsumdolor.com",
"address": "5585 Metus. St."
},
{
"date": "Apr 28, 2015",
"name": "Audra A. Gates",
"email": "consectetuer.adipiscing@libero.ca",
"address": "448-332 Iaculis Ave"
},
{
"date": "May 6, 2018",
"name": "Gloria K. Dodson",
"email":...