JS将过去日期的样式/类名称更改为字符串值

JS change style/className of past dates as string values

本文关键字：字符串 过去 日期 样式 JS      更新时间：2023-09-26

我有一个日期列表，格式为 dd/mm/yyyy 作为文本我正在尝试根据今天的日期使这些日期更改样式或类别今天是 2016 年 2 月 9 日或 2016 年 2 月 9

日

显然，有问题，因为我希望"if"语句将类名标记为.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)
    {
	     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>

斯菲德尔

执行此操作的最佳方法是将字符串解析为日期，并将其与当前日期进行检查。下面是将 DMY 日期转换为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;
}

编辑 2

请参阅我的 JSFiddle 示例以获取工作版本。

相关文章：