I have a webpage for all events, there is two section upcoming events and past events, both section has multiple divs, if the date of the div in upcoming event is older than today, it should automatically move to past events, and should be deleted from upcoming events.
I already have a function to sort the divs in date wise
The Below snippet is one of my divs and fuction to sort.
// Function to sort the events by date.
function ddmmyyyy(s) {
var part = s.split(/\//),
date = new Date();
date.setYear(part[2]);
date.setMonth(part[1] - 1);
date.setDate(part[0]);
return date;
}
// In Descending Order
function ddmmyyyClassSortDescending(a, b) {
var A = ddmmyyyy(a.getAttribute("data-event-date")),
B = ddmmyyyy(b.getAttribute("data-event-date"));
return A < B ? 1 : -1;
}
// In Ascending Order
function ddmmyyyClassSortAscending(a, b) {
var A = ddmmyyyy(a.getAttribute("data-event-date")),
B = ddmmyyyy(b.getAttribute("data-event-date"));
return A > B ? 1 : -1;
}
$.fn.sortChildren = function(cmp) {
var self = this,
children = $.makeArray(this.children()).sort(cmp);
$.each(children, function(i, child) {
self.append(child);
});
return self;
};
$(function() {
$(".past-Events").sortChildren(ddmmyyyClassSortDescending);
});<div id="past-Events">Past Event
<div class="shadow p-3 mb-5 bg-white rounded" id="distinguished-Lectures" data-event-date="15/12/2021">
<center>
<b>
<h5>
<font color="#183a1d">IMSc Distinguished Lecture</font>
</h5>
</b>
</center>
</div>
</div>