突出显示过去的日期和将在未来两周内到期的日期答案

【问题标题】：Highlight dates in past and dates that will expire in next two weeks突出显示过去的日期和将在未来两周内到期的日期
【发布时间】：2014-02-07 08:34:18
【问题描述】：

我现在正在为一些代码苦苦挣扎，但我无法解决它。我有一张纯 html 表格。这个html文件每天都发给我，html文件中的日期每天都在更新。

它有一个表结构。货架上的编号、描述和产品过期日期：

<table>
    <tr><td>1</td><td>coca cola</td><td>2014-08-17</td></tr>
    <tr><td>2</td><td>bread</td><td>2014-02-13</td></tr>
    <tr><td>3</td><td>apple</td><td>2014-01-20</td></tr>
    <tr><td>4</td><td>cookies</td><td>2014-04-03</td></tr>
</table>

现在我已经测试了几段代码，如果你愿意，我可以将其发布在这里，但我想让我的问题尽可能干净，而不是让我的问题被代码片段淹没。

现在我想要的是：

已经过去的日期变成橙色
2 周内到期的日期将变为红色
其余的日期没有颜色

到目前为止我最好的尝试是这段代码：

<?php 

$date_to_compare = "2014/02/02";
$dateNow = new DateTime("now");
$dateCompare = new DateTime($date_to_compare);
$difference = $dateNow->diff($dateCompare);

//for debugging; %R gives you prefix (- or +); %a gives you days.
echo "Days in difference (from today until compare date): " . $difference->format('%R%a') . "<br />";

if ($difference->format('%R%a') < 0) {
    $highlight_css_class = "orange"; 
} elseif ($difference->format('%R%a') <= 14) {
    $highlight_css_class = "red";
} else {
    $highlight_css_class = "";
}
    ?>

在我的表中我添加了一个td 类

<td class="<?php echo $highlight_css_class; ?>">...</td>

CSS

<style type="text/css">
    .red { 
        color : #f00; 
    }
    .orange { 
        color : #ffa500; 
    }
</style>

但这不起作用...所有日期都变成红色并被着色....有人可以帮助我吗？我正在尝试修复此问题 4 天。

【问题讨论】：

目前有四个重复您自己的问题Highlight all dates from now untill 2 weeks later请停止此现在。

标签： javascript php jquery css

【解决方案1】：

这个 JS 会从你的 tr 标签中挑选出每个第三个孩子，将日期按破折号拆分成一个数组，将数组用作日期，计算出该日期与现在之间的时间差（以天为单位），然后应用你的颜色样式。

jsfiddle example

var parents = document.getElementsByTagName("tr")

for (var i = 0, ii = parents.length; i < ii; i++) {
    var parent = parents[i],
        children = parent.children

for (var j = 0, jj = children.length; j < jj; j++) {
    var elem = children[j]
    if (j % 3 === 2) {
        var dateElement = elem.innerHTML;
        var dateArray = dateElement.split("-");
        var prevTime = new Date(dateArray);
        var thisTime = new Date();
        var diff = prevTime.getTime() - thisTime.getTime();
        var days = 1000*60*60*24;
        var diffInDays = Math.ceil(diff / days);
        if (diffInDays < 0) {
            elem.style.color = "#ffa500";
        }
        else if (diffInDays <= 14) {
            elem.style.color = "#ff0000";
        }
    }
} }

【讨论】：

哦，我的 thx 终于有人帮助了我。像魅力一样工作:)
@user3090697 请删除此问题的重复项，以整合其他寻求类似解决方案的人。

【解决方案2】：

试试这个 :) 请像我需要积分一样点击。谢谢：）

$date_to_compare = "2014/02/08";
$dateNow = new DateTime("now");
$dateCompare = new DateTime($date_to_compare);
$difference = $dateNow->diff($dateCompare);

$highlight_css_class = '';

if ($difference->invert) 
    $highlight_css_class = 'orange';
elseif ($difference->days <= 14) 
    $highlight_css_class = 'red';
}
echo $highlight_css_class;
?>

【讨论】：