使用 JavaScript，如何在具有多个值的日期列的表中突出显示“今天”的每个日期

Posted 2023-03-05

【中文标题】使用 JavaScript，如何在具有多个值的日期列的表中突出显示“今天”的每个日期

【英文标题】：Using JavaSript, how can I highlight each date that is 'today' in a table which has a date column with multiple values

【发布时间】：2021-09-01 13:43:56

【问题描述】：

我有一个静态生成的表格，如下所示：

<table>
   <tr><td> Thing 1 </td><td> 2021-06-01 </td></tr>
   <tr><td> Thing 2 </td><td> 2021-06-01 </td></tr>
   <tr><td> Thing 3 </td><td> 2021-06-01 </td></tr>
</table>

我想突出显示“今天”的任何日期，或者可能将文本更改为“今天”或“n 天前”。我假设我需要一个函数来遍历日期并以某种方式更改/突出显示它们。

html 每 3 天生成一次，因此我无法生成“今天”值，但我可以控制这一代。我不知道用户何时会查看该页面，例如可能是第 3 天，因此 JS 需要完成这项工作。

有什么建议吗？这是我的第一篇文章，因此对发布中的任何错误表示歉意。我没有使用 JQuery，而是使用 Bootstrap 4 和 popper.js。我是 JS 的相对菜鸟。

【参考方案1】：

如果您为任何日期（例如今天）准备一个日期对象，那么您可以在循环中检查 td 单元格的 innerText 并根据需要进行替换

// get today's date ready
let today = new Date(), refDate = new Date();
today = today.toISOString().split("T").slice(0, -1)[0]

yesterday = new Date(refDate);
yesterday = new Date(yesterday.setDate(yesterday.getDate() - 1));
yesterday = yesterday.toISOString().split("T").slice(0, -1)[0];

tomorrow = new Date(refDate);
tomorrow = new Date(tomorrow.setDate(tomorrow.getDate() + 1));
tomorrow = tomorrow.toISOString().split("T").slice(0, -1)[0];

function isDate(v) 
  v = v.split("-");
  let isDate = true;
  v.forEach((d, i) => 
    if (i === 0 && (d.length != 4 || parseInt(d) === 0)) isDate = false;
    else if (i > 0 && (d.length != 2 || parseInt(d) === 0)) isDate = false
  )
  return isDate;


let tds = document.querySelectorAll('td');
tds.forEach(td => 
  let val = td.innerText.trim(),
    oneweek = (1000 * 60 * 60 * 24 * 7)
  if (val === today) td.innerText = "Today"
  else if (val === yesterday) td.innerText = "Yesterday"
  else if (val === tomorrow) td.innerText = "Tomorrow"
  else if (isDate(val) && new Date().getTime() - new Date(val).getTime() > oneweek) td.innerText = 'more than one week ago';
)

<table>
  <tr>
    <td> Thing 1 </td>
    <td> 2021-06-16 </td>
  </tr>
  <tr>
    <td> Thing 2 </td>
    <td> 2021-06-15 </td>
  </tr>
  <tr>
    <td> Thing 3 </td>
    <td> 2021-06-01 </td>
  </tr>
  <tr>
    <td> Thing 4 </td>
    <td> 2021-06-17 </td>
  </tr>
  <tr>
    <td> Thing 4 </td>
    <td> 2021-07-17 </td>
  </tr>
</table>

【讨论】：

toISOString 返回 UTC 日期，该日期与用户在一天开始或结束时的时区偏移期间的本地日期不同，具体取决于用户是否在东部或格林威治以西。 isDate 功能无效，见How to validate a date?。

这完全有效，我已经使用了几个月。我有一些问题，奇怪的是它不适用于基于 Linux 或 ios 的浏览器，但我的受众主要是 Windows。非常感谢。抱歉我没有早点回复。这是我多年来的第一篇文章，忘记了我的举止。