Récupérer la date de l'élément HTML et la comparer à la date du jour JS

Question

Je viens juste de commencer à coder en javascript, donc je n'ai pas tout appris.

Je voudrais référencer une date dans un élément sur une page HTML et utiliser javascript pour avertir l'utilisateur que la date est passée.

Voici ce que j'ai jusqu'à présent:

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>

J'ai converti la date d'aujourd'hui en nombre et montré pour voir si cela a fonctionné. Je n'arrive pas à comprendre comment les comparer correctement car je ne pouvais pas trouver comment faire l'analyse EndDate.

Merci.

Answer 1

Comme vous avez actuellement, vous êtes saisissant le .innerHTML de Close, et en attribuant à ce droit EndDate. Cette valeur (27 September 2017) est ensuite comparée à l'horodatage actuel (1506645355000). Les chaînes sont comparées lexicographically, alors JavaScript pense que la chaîne de 27 September 2017 est 'plus grande' que l'entier 1506645355000.

Ce que vous devez faire est de déplacer votre Date.parse() à la première ligne, l'emballage de votre Date.parse() dans l'attribution variable elle-même, de sorte que votre variable EndDate se termine avec la date analysée.

Ensuite, si nécessaire, vous pouvez produire ce retour à la page en fixant la cible .innerHTML de AuctionDate à la EndDate variables directement:

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>

Hope this helps! :)

Answer 2

Essayez ceci:

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

Votre var EndDate = document.getElementById("Close"); original obtient juste l'élément DOM où vous avez mis votre date.
Ainsi, votre comparaison ultérieure if (EndDate < TodaysDate) compare DOM Element <Date de l'objet

Vous pouvez obtenir la date de votre Close élément HTML en sélectionnant l'élément et obtenir le texte en son sein:
var dateString = document.getElementById('Close').innerText

Puisque vous voulez traiter les objets Date, vous pouvez ensuite l'analyser:
var EndDate = Date.parse(dateString)

À ce stade, vous pouvez comparer les deux objets Date.

Notez également, il n'y a pas de point l'analyse d'un objet Date:
var TodaysDate = Date.parse(Date());
Vous pouvez simplement faire
var TodaysDate = new Date();

Je sais qu'ils ne le font pas regarder la même chose, mais vous voulez vraiment traiter avec Date objets partout.

---

Side note: vous devez généralement utiliser .innerText plutôt que .innerHTML
Prenez cet exemple - dire qu'au lieu de cette
<span id="Close">27 Septermber 2017</span>
vous aviez une structure plus complexe:
<span id="Close"><span class="day">27</span> <span class="month">September</span> <span class="year">2017</span></span>

En ce cas, close.innerHtml vous donnerait tout ce gâchis
<span id="Close"><span class="day">27</span> <span class="month">September</span> <span class="year">2017</span></span>

mais close.innerText donnerait juste 27 September 2017

Que vous souhaitiez innerText ou innerHTML dépend de ce que vous faites réellement avec ce que vous avez; connaître la différence et savoir ce que vous voulez.