Applying color to rows in Sharepoint based on if an item is overdue - list

Question

I'm using Sharepoint to develop an open issues list for my company that will automatically track if an issue is about to be due or overdue based on the color of the row. I have a way to override the default Sharepoint list features and edit the rows, but I think my date comparisons aren't functioning correctly. Here is my code so far:
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
var statusColors = {
'Almost Due' : '#FFFF00',
'Overdue' : '#FF0000',
};
var rows = ctx.ListData.Row;
for (var i=0;i<rows.length;i++)
{
var due = rows[i]["Due Date"];
var duedate = new Date(due);
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
var today = new Date();
if(duedate <= today) {
var status = 'Overdue';
}
Else if (due.toDateString - today.toDateString <= 7 && due.toDateString - today.toDateString >= 0){
var status = 'Almost Due';
}
row.style.backgroundColor = statusColors[status];
}
}
});
});
I need the row to change red if the issue is past due and the issue to change yellow if the issue is due within one week.

Answer 1

Modified example:
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {
var statusColors = {
'Almost Due' : '#FFFF00',
'Overdue' : '#FF0000',
};
var rows = ctx.ListData.Row;
for (var i=0;i<rows.length;i++)
{
var dueDate = new Date(rows[i]["DueDate"]);
var today = new Date();
var status = null;
if(dueDate <= today) {
status = 'Overdue';
}
else if (daysBetween(today,dueDate) <= 7 && daysBetween(today,dueDate) >= 0){
status = 'Almost Due';
}
if (status != null){
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
row.style.backgroundColor = statusColors[status];
}
}
}
});
});
function daysBetween(startDate, endDate) {
var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
return diffDays;
}
The list of changes:
Fixed some typos like Else keyword
Introduced daysBetween function for getting dates difference in
days

Answer 2

due.toDateString - today.toDateString ...
I suspect that due.toDateString is returning a function definition. If you want your code to actually run that function, you'd want due.toDateString().
That said, since you're trying to do math with these dates, it's best to keep them as datetime objects or numbers rather than convert them to strings. Otherwise your subtraction is going to surprise you with NaN and your comparisons are going to be perpetually false.
If you subtract a date object from another date object in JavaScript, you'll get the difference between the dates in milliseconds. Convert that to days and you'll be good to go!