suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich mithilfe von JavaScript überprüfen, ob ein Eingabedatum mit dem heutigen Datum übereinstimmt?

Wie kann ich mithilfe von JavaScript überprüfen, ob ein Eingabedatum mit dem heutigen Datum übereinstimmt?

王林
王林nach vorne
2023-08-26 15:33:121293Durchsuche

如何使用 JavaScript 检查输入日期是否等于今天的日期？

In diesem Tutorial lernen wir, mithilfe von JavaScript zu überprüfen, ob das Eingabedatum mit dem heutigen Datum übereinstimmt oder nicht. Manchmal müssen wir das Datum des Benutzers aus einem Eingabefeld in verschiedenen Formaten abrufen und prüfen, ob das Eingabedatum und das heutige Datum übereinstimmen.

Hier lernen wir zwei Methoden kennen, um zu überprüfen, ob das Eingabedatum mit dem heutigen Datum übereinstimmt.

Vergleichen Sie jeweils Jahre, Monate und Tage

Benutzer können das vollständige Jahr, den Monat und das Datum aus dem Zeitstempel eines Date-Objekts mithilfe verschiedener Methoden wie getFullYear(), getMonth() und getDate() abrufen. Darüber hinaus können wir Jahr, Monat und Datum ermitteln, indem wir die vom Benutzer eingegebene Zeichenfolge durch ein Trennzeichen aufteilen.

Danach können wir Jahr, Monat und Tag der beiden Zeitstempel vergleichen, um zu prüfen, ob das Eingabedatum mit dem heutigen Datum übereinstimmt.

Grammatik

Benutzer können der folgenden Syntax folgen, um festzustellen, ob das Eingabedatum mit dem heutigen Datum übereinstimmt. 

let inputYear = dateInput.value.split("/")[0];
let inputMonth = dateInput.value.split("/")[1];
let inputDate = dateInput.value.split("/")[2];
if (current_date.getFullYear() == inputYear && current_date.getMonth() == inputMonth - 1 && current_date.getDate(); == inputDate) {
   // date is equal to today’s date
} else{
   // date is not equal to today’s date
}

In der obigen Syntax erhalten wir nach dem Teilen der Eingabezeichenfolge mit „/“ ein Array mit drei Werten. Der erste Wert ist das Jahr, der zweite Wert ist der Monat und der dritte Wert ist der Tag.

Algorithmus

Benutzer können dem folgenden Algorithmus folgen.

  • Schritt 1 – Erhalten Sie das Datum vom Benutzer in einem bestimmten Format.

  • Schritt 2 – Teilen Sie die Datumszeichenfolge auf und extrahieren Sie Jahr, Monat und Datum. Hier verwenden wir die Split()-Methode von JavaScript, um die Datumszeichenfolge zu teilen.

  • Schritt 3 – Verwenden Sie den neuen Date()-Konstruktor, um ein Datum zu erstellen, das dem heutigen Datum entspricht.

  • Schritt 4 – Extrahieren Sie Jahr, Monat und Datum aus dem heutigen Datum mit den Methoden getFullYear(), getMonth() und getDate().

    李>

  • Schritt 5 – Vergleichen Sie Jahr, Monat und Datum zweier Zeitstempel. Die Methode getMonth() gibt den Monat zwischen 0 und 11 zurück. Wir müssen also den Monat mit inputMonth – 1 vergleichen.

  • Schritt 6 – Wenn alle drei Eigenschaften beider Datumsangaben übereinstimmen, dann ist das Eingabedatum gleich dem heutigen Datum.

Beispiel

Im folgenden Beispiel haben wir die Funktion „compareDate()“ erstellt. Wenn der Benutzer auf die Schaltfläche „Senden“ klickt und eine Datumszeichenfolge in das Eingabefeld eingibt, ruft er die Funktion „compareDate()“ auf.

Die Funktion

compareDate() implementiert den obigen Algorithmus, um zu prüfen, ob das Eingabedatum mit dem heutigen Datum übereinstimmt. 

<html>
<body>
   <h3>Comparing the <i>date, month, and year</i> separately to check if input the date is equal to today's date </h3>
   <h4>Enter the date in yyyy/mm/dd format.</h4>
   <input type="text" id="dateInput" />
   <button id = "submit" onclick = "compareDate()"> submit </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let dateInput = document.getElementById("dateInput");
      function compareDate() {
         // split the input string
         let inputYear = dateInput.value.split("/")[0];
         let inputMonth = dateInput.value.split("/")[1];
         let inputDate = dateInput.value.split("/")[2];

         let current_date = new Date();
         // get the month, year, and date from the time stamp
         let year = current_date.getFullYear();
         let month = current_date.getMonth();
         let day = current_date.getDate();
         // compare year, month, and date
         if (year == inputYear && month == inputMonth - 1 && day == inputDate) {
            output.innerHTML = "Date is equal to today's date!";
         } else {
            output.innerHTML = "Date is not equal to today's date!";
         }
      }
   </script>
</body>
</html>

Verwenden Sie die toDateString()-Methode

Wir können die Methode toDateString() mit dem Zeitstempel des Date-Objekts verwenden, die nur die Datumszeichenfolge im Zeitstempel zurückgibt.

Wir können einen neuen Zeitstempel des Date-Objekts erstellen, indem wir jeden Wert verwenden, den wir aus der Benutzereingabe erhalten, und die Datumszeichenfolge mithilfe der Methode toDateString() abrufen. Als nächstes können wir auch das aktuelle Datum erstellen, das das heutige Datum darstellt, und die Methode toDateString() verwenden.

Schließlich können wir die Datumszeichenfolgen der beiden Zeitstempel vergleichen.

Grammatik

Benutzer können die Methode toDateString() gemäß der folgenden Syntax verwenden, um zu überprüfen, ob die Eingabe mit dem heutigen Datum übereinstimmt. 

let [year, month, date] = dateInput.value.split(",");
let inputDate = new Date(year, month - 1, date);
let current_date = new Date();
if (inputDate.toDateString() == current_date.toDateString()) {
   // it’s today’s date.
} else {
   // It’s not matching with today’s date
}

In der obigen Syntax haben wir einen Zeitstempel des Eingabedatums mit Jahr, Monat – 1 und Datumswert erstellt. Da das Date-Objekt einen Monatswert zwischen 0 und 11 hat, müssen wir den Monat angeben – 1.

Beispiel

Das folgende Beispiel ruft vom Benutzer eine Datumszeichenfolge in einem Texteingabefeld in einem bestimmten Format ab. Danach extrahieren wir Jahr, Monat und Datum aus der Zeichenfolge und erstellen ein neues Datum.

Als nächstes vergleichen wir die Datumszeichenfolgen der beiden Zeitstempel. 

<html>
<body>
   <h3>Using the <i> toDateString() </i> method to check if input the date is equal to today's date </h3>
   <h4>Enter the date in yyyy,mm,dd format.</h4>
   <input type = "text" id = "dateInput" />
   <button id = "submit" onclick = "compareDate()"> submit </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      let dateInput = document.getElementById("dateInput");
      function compareDate() {
         // extract the year, month, and date
         let [year, month, date] = dateInput.value.split(",");
         let inputDate = new Date(year, month - 1, date);
         let current_date = new Date();
         if (inputDate.toDateString() == current_date.toDateString()) {
            output.innerHTML = "Date is equal to today's date!";
         } else {
            output.innerHTML = "Date is not equal to today's date!";
         }
      }
   </script>
</body>
</html>

In der obigen Ausgabe kann der Benutzer beobachten, dass die Eingabe eines Datums in einem ungültigen Format einen Fehler in der Konsole erzeugt.

Benutzer haben zwei Möglichkeiten kennengelernt, um zu überprüfen, ob ein Datum mit dem heutigen Datum übereinstimmt. Benutzer können jedoch auch die Methode setHours() verwenden. Wir können die Stunde im Datumsobjekt auf 0 setzen und sie mit dem heutigen Datum vergleichen, um die Gleichheit zu prüfen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript überprüfen, ob ein Eingabedatum mit dem heutigen Datum übereinstimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Extrahieren Sie Zahlen mit JavaScript aus einer ZeichenfolgeNächster Artikel：Extrahieren Sie Zahlen mit JavaScript aus einer Zeichenfolge

In Verbindung stehende Artikel

Mehr sehen