So füllen Sie ein Formularfeld vorab mit dem heutigen Datum und JavaScript oder JQuery aus
Während viele Lösungen die Möglichkeit bieten, das Datum bei jedem Formulareintrag zu speichern, gibt es auch Fälle, in denen dies nicht möglich ist. Wir empfehlen unseren Kunden, ihrer Website ein verstecktes Feld hinzuzufügen und diese Informationen zusammen mit dem Eintrag weiterzugeben, damit sie verfolgen können, wann Formulareinträge eingegeben werden. Mit JavaScript ist dies einfach.
So füllen Sie ein Formularfeld mit dem heutigen Datum und JavaScript vorab aus
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with JavaScript</title>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Function to get today's date in the desired format
function getFormattedDate() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
return formattedDate;
}
// Use JavaScript to set the value of the hidden field to today's date
document.getElementById('hiddenDateField').value = getFormattedDate();
</script>
</body>
</html>
Lassen Sie uns den bereitgestellten HTML- und JavaScript-Code Schritt für Schritt aufschlüsseln:
<!DOCTYPE html>
und<html>
: Dies sind Standard-HTML-Dokumentdeklarationen, die angeben, dass es sich um ein HTML5-Dokument handelt.<head>
: Dieser Abschnitt wird normalerweise verwendet, um Metadaten über das Dokument aufzunehmen, z. B. den Titel der Webseite, der mithilfe von festgelegt wird<title>
Element.<title>
: Dadurch wird der Titel der Webseite auf „Datumsvorausfüllung mit JavaScript“ gesetzt.<body>
: Dies ist der Hauptinhaltsbereich der Webseite, in dem Sie die sichtbaren Inhalte und Elemente der Benutzeroberfläche platzieren.<form>
: Ein Formularelement, das Eingabefelder enthalten kann. In diesem Fall wird es verwendet, um das ausgeblendete Eingabefeld zu enthalten, das mit dem heutigen Datum gefüllt wird.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Dies ist ein verstecktes Eingabefeld. Es erscheint nicht auf der Seite, kann aber Daten speichern. Zur Identifizierung und Verwendung in JavaScript erhält es die ID „hiddenDateField“ und den Namen „hiddenDateField“.<script>
: Dies ist das Eröffnungstag für einen JavaScript-Skriptblock, in den Sie JavaScript-Code schreiben können.function getFormattedDate() { ... }
: Dies definiert eine aufgerufene JavaScript-FunktiongetFormattedDate()
. Innerhalb dieser Funktion:- Es entsteht ein Neues
Date
Objekt, das das aktuelle Datum und die aktuelle Uhrzeit darstelltconst today = new Date();
. - Es formatiert das Datum in eine Zeichenfolge mit dem gewünschten Format (mm/tt/jjjj).
today.toLocaleDateString()
dem „Vermischten Geschmack“. Seine'en-US'
Das Argument gibt das Gebietsschema (amerikanisches Englisch) für die Formatierung und das Objekt mit anyear
,month
undday
Eigenschaften definiert das Datumsformat.
- Es entsteht ein Neues
return formattedDate;
: Diese Zeile gibt das formatierte Datum als Zeichenfolge zurück.document.getElementById('hiddenDateField').value = getFormattedDate();
: Diese Codezeile:- Verwendung
document.getElementById('hiddenDateField')
um das ausgeblendete Eingabefeld mit der ID „hiddenDateField“ auszuwählen. - Stellt das ein
value
Eigenschaft des ausgewählten Eingabefelds auf den von zurückgegebenen WertgetFormattedDate()
Funktion. Dadurch wird das ausgeblendete Feld mit dem heutigen Datum im angegebenen Format gefüllt.
- Verwendung
Das Endergebnis ist, dass beim Laden der Seite das ausgeblendete Eingabefeld mit der ID „hiddenDateField“ mit dem heutigen Datum im Format MM/TT/JJJJ ohne führende Nullen gefüllt wird, wie in angegeben getFormattedDate()
Funktion.
So füllen Sie ein Formularfeld mit dem heutigen Datum und jQuery vorab aus
<!DOCTYPE html>
<html>
<head>
<title>Date Prepopulation with jQuery and JavaScript Date Object</title>
<!-- Include jQuery from a CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<!-- Hidden field for the date -->
<input type="hidden" id="hiddenDateField" name="hiddenDateField">
</form>
<script>
// Use jQuery to set the value of the hidden field to today's date
$(document).ready(function() {
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
$('#hiddenDateField').val(formattedDate);
});
</script>
</body>
</html>
Dieser HTML- und JavaScript-Code zeigt, wie Sie mit jQuery ein ausgeblendetes Eingabefeld mit dem heutigen Datum im Format MM/TT/JJJJ ohne führende Nullen vorab ausfüllen. Lassen Sie es uns Schritt für Schritt aufschlüsseln:
<!DOCTYPE html>
und<html>
: Dies sind Standard-HTML-Dokumentdeklarationen, die angeben, dass es sich um ein HTML5-Dokument handelt.<head>
: Dieser Abschnitt wird zum Einfügen von Metadaten und Ressourcen für die Webseite verwendet.<title>
: Setzt den Titel der Webseite auf „Datumsvorausfüllung mit jQuery und JavaScript-Datumsobjekt“.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Diese Zeile schließt die jQuery-Bibliothek ein, indem ihre Quelle aus einem Content Delivery Network (CDN) angegeben wird. Es stellt sicher, dass die jQuery-Bibliothek zur Verwendung auf der Webseite verfügbar ist.<body>
: Dies ist der Hauptinhaltsbereich der Webseite, in dem Sie die sichtbaren Inhalte und Elemente der Benutzeroberfläche platzieren.<form>
: Ein HTML-Formularelement, das zur Aufnahme von Eingabefeldern verwendet wird. In diesem Fall wird es verwendet, um das ausgeblendete Eingabefeld zu kapseln.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ein verstecktes Eingabefeld, das auf der Webseite nicht sichtbar ist. Ihm wird die ID „hiddenDateField“ und der Name „hiddenDateField“ zugewiesen.<script>
: Dies ist das Eröffnungstag für einen JavaScript-Skriptblock, in den Sie JavaScript-Code schreiben können.$(document).ready(function() { ... });
: Dies ist ein jQuery-Codeblock. Es nutzt die$(document).ready()
Funktion, um sicherzustellen, dass der enthaltene Code ausgeführt wird, nachdem die Seite vollständig geladen wurde. Innerhalb dieser Funktion:const today = new Date();
schafft eine neueDate
Objekt, das das aktuelle Datum und die aktuelle Uhrzeit darstellt.const formattedDate = today.toLocaleDateString('en-US', { ... });
Formatiert das Datum mithilfe von in eine Zeichenfolge mit dem gewünschten Format (MM/TT/JJJJ).toLocaleDateString
Methode.
$('#hiddenDateField').val(formattedDate);
wählt mit jQuery das versteckte Eingabefeld mit der ID „hiddenDateField“ aus und setzt esvalue
auf das formatierte Datum. Dadurch wird das ausgeblendete Feld effektiv mit dem heutigen Datum im angegebenen Format vorab ausgefüllt.
Der jQuery-Code vereinfacht die Auswahl und Änderung des ausgeblendeten Eingabefelds im Vergleich zu reinem JavaScript. Wenn die Seite geladen wird, wird das ausgeblendete Eingabefeld mit dem heutigen Datum im Format MM/TT/JJJJ gefüllt und es sind keine führenden Nullen vorhanden, wie in angegeben formattedDate
variabel.