JS change style/className of past dates as string values

Question

I have a list of dates in format dd/mm/yyyy as text I'm trying to make these dates change style or class according to today's date today is february 9th 2016 or 09/02/2016

obviously, there's something wrong, because i want the "if" statements to mark the className as .past

if the year is before 2016 OR
if the month is before today's month (february) AND before today's day of the month (9)

13/01/2016 is marked as future- and i don't know why what am i doing wrong?

var today=new Date();
    var yr = today.getFullYear();
    var da = today.getDate();
    if (da<10){da= "0"+today.getDate()} else {da=today.getDate()};
    var mo = (today.getMonth()+1);
    if (mo<10){mo= "0"+mo} else {mo=mo};

    var cnl = document.getElementsByClassName("lesson");
    var cnd = document.getElementsByClassName("date");
    var cd = document.querySelectorAll('.date');
    for (var i=0;i<cnd.length;i)
    {
      var cd = document.querySelectorAll('.date')[i].innerHTML;
 

    if (
        ( cd.substring(6,10)<yr ) 
   
          ||
  
   (   
     ( 
     cd.substring(3,5) <= (mo)  
      ) 
    
          &&
    
     (
       ( 
     cd.substring(0,2) < (da)  
        ) 
     )
     
   )
    ) 
     {
     cnd[i].className = "past";
  }
  else 
  {
       cnd[i].className = "future";
     }
  
}

    .date {font-size:15px;}
    .past
    {
    font-family:arial;
    font-size:15px;
    direction:rtl;
    text-align:right;
    font-weight:300;
    color:#f11;  
    }
    .future
 {
       font-size:15px;
       direction:rtl;
        text-align:right;
        font-weight:300;
        color:#1f1;  
    }

    <ol>
    <li><span class="date">18/11/2015</span></li>
    <li><span class="date">02/12/2015</span></li>
    <li><span class="date">16/12/2015</span></li>
    <li><span class="date">30/12/2015</span></li>
    <li><span class="date">13/01/2016</span></li>
    <li><span class="date">03/02/2016</span></li>
    <li><span class="date">17/02/2016</span></li>
    <li><span class="date">02/03/2016</span></li>
    <li><span class="date">16/03/2016</span></li>
    <li><span class="date">30/03/2016</span></li>
    <li><span class="date">04/05/2016</span></li>
    <li><span class="date">13/04/2016</span></li>
    <li><span class="date">04/05/2016</span></li>
    <li><span class="date">18/05/2016</span></li>
    <li><span class="date">08/06/2016</span></li>
    </ol>

jsfiddle

Answer 1

The best way of doing this is to parse the string as a date and check it against the current date. Here's a simple function to convert your DMY date into a Date instance:

function dmyToDate(dmy) {
    var parts = dmy.split('/');
    parts[1] -= 1; // Months are 0-indexed
    return new Date(parts[2], parts[1], parts[0]);
}

Now you can loop through each of your elements and compare their date against the current date, adding a class if necessary.

var i = 0;
var il = cnd.length;

while (i < il) {

    if (dmyToDate(cnd[i].textContent) < today) {
        cnd[i].className = 'past';
    } else {
        cnd[i].className = 'future';
    }

    i += 1;

}

Edit

In order to test for today, you need to reduce the timestamp for today down to the nearest day. This can be done with a couple of basic utility functions.

// You can just write
// var day = 86400000
// but I find that spelling it out like this is easier to understand.
var day = 1000 * 60 * 60 * 24;

function numberToNearest(number, nearest, method) {

    var prop = 'round';

    if (typeof method === 'string' && typeof Math[method] === 'function') {
        prop = method;
    }

    return Math[prop](number / nearest) * nearest;

}

function getDayStart(date) {

    if (typeof date !== 'number' || !(date instanceof Date)) {
        date = Date.now();
    }

    return numberToNearest(date, day, 'floor');

}

var today = getDayStart();

Now the loop just needs an extra clause.

var i = 0;
var il = cnd.length;
var cndElem;
var cndDate;

while (i < il) {

    cndElem = cnd[i];
    cndDate = dmyToDate(cndElem.textContent);

    if (cndDate < today) {
        cndElem.className = 'past';
    } else if (cndDate > today) {
        cndElem.className = 'future';
    } else {
        cndElem.className = 'present';
    }

    i += 1;

}

Edit 2

See my JSFiddle example for a working version.