从 HTML 元素中获取日期并将其与今天的日期 JS 进行比较

Question

我才刚刚开始用 javascript 编码，所以我还没有学到所有东西。

我想在 HTML 页面上的元素中引用日期并使用 javascript 提醒用户该日期已过去。

这是我目前所拥有的：

var EndDate = document.getElementById("Close");
document.getElementById("AuctionDate").innerHTML = 
Date.parse(EndDate.innerHTML);
var TodaysDate = Date.parse(Date());
document.getElementById("TodaysDate").innerHTML = TodaysDate;
if (EndDate < TodaysDate) {
    alert("Closed");
    } else { 
    alert("Open");
}

<span id="Close">27 September 2017</span>
<p id="AuctionDate"></p>
<p id="TodaysDate"></p>

我已将今天的日期转换为数字并显示它是否有效。 我似乎无法弄清楚如何正确比较它们，因为我无法找到如何进行 EndDate 解析。

谢谢。

Answer 1

正如您目前拥有的那样，您从Close 获取.innerHTML，并将其直接分配给EndDate。然后将该值 (27 September 2017) 与当前时间戳 (1506645355000) 进行比较。比较字符串lexicographically，所以JavaScript认为27 September 2017的字符串比整数1506645355000“大”。

您需要做的是将您的 Date.parse() 移动到第一行，将您的 Date.parse() 包装在变量赋值本身中，以便您的变量 EndDate 以解析日期结束。

然后，如果需要，您可以通过将AuctionDate 的目标.innerHTML 直接设置为变量EndDate 将其输出回页面：

var EndDate = Date.parse(document.getElementById("Close").innerHTML);
console.log("EndDate's value is: " + EndDate) // returns a parsed date
document.getElementById("AuctionDate").innerHTML = EndDate;
var TodaysDate = Date.parse(Date());
document.getElementById("TodaysDate").innerHTML = TodaysDate;
if (EndDate < TodaysDate) {
  alert("Closed");
} else {
  alert("Open");
}

<span id="Close">27 September 2017</span>
<p id="AuctionDate"></p>
<p id="TodaysDate"></p>

希望这会有所帮助！ :)

Answer 2

试试这个：

if (new Date('27 September 2017') < new Date('28 September 2017')) {
  console.log('still open')
}

// where
// 27 September 2017 is dateToday
// 28 September 2017 is dateCloses

var today = document.getElementById("TodaysDate").innerHTML
var dateToday = new Date(today)

Answer 3

您原来的 var EndDate = document.getElementById("Close"); 只是获取您放置日期的 DOM 元素。
因此，您随后的比较 if (EndDate < TodaysDate) 正在比较 DOM 元素 < 日期对象

您可以从Close html 元素中获取日期，方法是选择元素然后获取其中的文本：
var dateString = document.getElementById('Close').innerText

既然要处理 Date 对象，那么就可以解析它：
var EndDate = Date.parse(dateString)

此时可以比较两个 Date 对象了。

还要注意，解析 Date 对象是没有意义的：
var TodaysDate = Date.parse(Date());
你可以简单地做
var TodaysDate = new Date();

我知道它们看起来不一样，但您确实想始终处理Date 对象。

---

旁注：您通常应该使用.innerText 而不是.innerHTML
举这个例子——说这个而不是这个
<span id="Close">27 Septermber 2017</span>
你有一个更复杂的结构：
<span id="Close"><span class="day">27</span> <span class="month">September</span> <span class="year">2017</span></span>

在这种情况下，close.innerHtml 会给你带来一团糟
<span id="Close"><span class="day">27</span> <span class="month">September</span> <span class="year">2017</span></span>

但 close.innerText 只会给出27 September 2017

您是否需要innerText 或innerHTML 取决于您实际使用的内容；知道区别，知道你想要什么。