JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="events"></ul>
JavaScript
var events = [{
"name": "My Event",
"date": "10/21/2015"
}, {
"name": "Wedding",
"date": "11/29/2015"
}, {
"name": "Birthday Party",
"date": "01/09/2016"
}, {
"name": "Anniversary Party",
"date": "09/19/2015"
}, {
"name": "Gala",
"date": "08/14/2015"
}, {
"name": "New Years Eve Party",
"date": "12/31/2015"
}, {
"name": "4th of July",
"date": "07/04/2015"
}, {
"name": "Another Event",
"date": "02/02/2016"
}, {
"name": "Trade Show",
"date": "10/02/2015"
}, {
"name": "Meeting",
"date": "04/09/2014"
}];
function convertToJSData(arr) {
for (var i = 0; i < arr.length; i++) {
// var from = "10-11-2011";
var from = arr[i].date;
var numbers = from.match(/\d+/g);
var date = new Date(numbers[2], numbers[0] - 1, numbers[1]);
arr[i].date = date;
}
console.log(arr[0].date);
return arr;
}
function getByDate(data) {
convertToJSData(data);
var filterDate = new Date(2015, 09, 01);
return data.filter(function (el) {
return el.date >= filterDate;
});
}
var filteredDates = getByDate(events);
filteredDates.sort(function (a, b) {
return a.date - b.date;
});
console.log(filteredDates.length); //returns 6
var appendHTML = function (el) {
var list = document.getElementById("events");
for (var i = 0; i < filteredDates.length; i++) {
var listItem = document.createElement('li');
listItem.innerHTML = filteredDates[i].name;
listItem.className = "event-list";
list.appendChild(listItem);
}
};
appendHTML(document.body);
var deleteEvent = function (ev) {
...