JS change style/className прошлых дат как строковые значения

Question

У меня есть список дат в формате dd/mm/yyyy как текст Я стараюсь, чтобы эти даты меняли стиль или класс в соответствии с сегодняшней датой сегодня - февраль девятый 2016 или 09/02/2016

очевидно, что-то не так, потому что я хочу «если» заявление, чтобы отметить Classname, как .past

если год к 2016 году иЛИ
если месяц до сегодняшнего месяца (февраль) И до сегодняшнего дня месяца (9)

13/01/2016 отмечен как будущий, и я не знаю, почему что я делаю неправильно?

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) 
 
    { 
 
\t  var cd = document.querySelectorAll('.date')[i].innerHTML; 
 
    
 

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

.date {font-size:15px;} 
 
    .past 
 
    { 
 
\t font-family:arial; 
 
\t font-size:15px; 
 
\t direction:rtl; 
 
\t text-align:right; 
 
\t font-weight:300; 
 
\t color:#f11; 
 
    } 
 
    .future 
 
\t { 
 
\t  font-size:15px; 
 
\t  direction:rtl; 
 
\t  text-align:right; 
 
\t  font-weight:300; 
 
\t  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

Лучший способ сделать это, чтобы разобрать строку как дату и проверить его на текущую дату. Вот простая функция для преобразования даты ДМГА в Date Например:

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

Теперь вы можете перебрать каждого из элементов и сравнить их дату от текущей даты, добавив класс, если это необходимо.

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; 

} 

Редактировать

Для того, чтобы проверить на сегодняшний день, вам нужно уменьшить метку времени на сегодняшний день до ближайшего дня. Это можно сделать с помощью пары основных функций полезности.

// 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(); 

Теперь петле требуется дополнительная статья.

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

Смотрите мой JSFiddle пример рабочей версии.