获取并显示日期为字符串

Question

stackoverflow 的窥视，所以我正在为我的网站处理这个事件。我真的很接近解决它，但我被困在一个问题上。问题是，当我试图显示自上次更新选项卡以来已经过了多少天时，我得到了一个 NaN 返回。请注意，我正在通过 ID 标签手动更新日期，其余的工作由 JavaScript 完成。这是我的 HTML 部分：

<span onload="manualDate('07-27-2021');" id="demoDate"></span> 

这是每天获得MS的JS计算

const _MS_PER_DAY = 1000 * 60 * 60 * 24 * 30;

这部分是字符串日期和修改数字，如果它们是个位数

var today = new Date();
var dd = today.getDate();

var mm = today.getMonth()+1; 
var yyyy = today.getFullYear();
if(dd<10) 
{
    dd='0'+dd;
} 

if(mm<10) 
{
    mm='0'+mm;
} 

在这里，我正在获取 HTML 跨度区域中的 id 值并使用该值并设置它

today = mm+'-'+dd+'-'+yyyy;
var newSetdate;

function manualDate(a) {
    newSetdate = '"' + a + '"';
    return newSetdate;
}

最后，这是将所有内容联系在一起的功能。出于某种原因，diffrence 的值是NaN，我不知道为什么。

function dateDiffInDays(a, b) {
    const utc1 = Date.UTC(a.getMonth(), a.getDate(), a.getFullYear());
    const utc2 = Date.UTC(b.getMonth(), b.getDate(), b.getFullYear());

    return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}

const   a = new Date('"' + newSetdate +'"'),
        b = new Date('"' + today +'"'),
        difference = dateDiffInDays(a, b);
        
document.getElementById("demoDate").innerHTML = difference + " days ago";

Answer 1

我建议进行以下更改：

1. 将选项卡的日期存储为data-* attribute
2. 格式化日期，使其可以被内置解析器解析，即使用 ECMA-262 支持的格式，例如 yyyy-mm-dd
3. 通过按照 UTC 执行所有操作来简化天数的计算，因此天数总是正好为 8.64e7 毫秒长 — 偶然 yyyy-mm-dd 被解析为 UTC，因此上面的 #2 对此进行了解释 ;-)

大概你只想计算一整天而不担心时间，所以：

function updateDate(el) {
  // Dates in the format yyyy-mm-dd are parsed as UTC
  let lastUpdateDate = new Date(el.dataset.lastUpdate);
  // Get difference from current date as UTC
  let now = new Date();
  let diffDays = (Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()) - lastUpdateDate) / 8.64e7;
  // Write output to element, allowing for day/s
  el.textContent = `The last update was ${diffDays} day${diffDays == 1? '' : 's'} ago`;  
}

window.onload = () => document.querySelectorAll('.demoDate').forEach(el => updateDate(el));

<p>2021-07-30: <span data-last-update="2021-07-30" class="demoDate"></span>
<p>2021-07-31: <span data-last-update="2021-07-31" class="demoDate"></span>
<p>2021-08-01: <span data-last-update="2021-08-01" class="demoDate"></span>