获取和显示日期作为字符串

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 span区域获取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-*属性
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>