Sådan udfyldes et formularfelt med dagens dato og JavaScript eller JQuery
Mens mange løsninger giver mulighed for at gemme datoen med hver formularindtastning, er der andre tidspunkter, hvor det ikke er en mulighed. Vi opfordrer vores kunder til at tilføje et skjult felt til deres websted og videregive disse oplysninger sammen med indtastningen, så de kan spore, hvornår formularposter indtastes. Det er nemt at bruge JavaScript.
Sådan udfyldes et formularfelt med dagens dato og JavaScript
<!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>
Lad os nedbryde den medfølgende HTML- og JavaScript-kode trin for trin:
<!DOCTYPE html>
,<html>
: Dette er standard HTML-dokumenterklæringer, der angiver, at dette er et HTML5-dokument.<head>
: Denne sektion bruges typisk til at inkludere metadata om dokumentet, såsom titlen på websiden, som indstilles ved hjælp af<title>
element.<title>
: Dette indstiller titlen på websiden til "Dato forudindfyldning med JavaScript."<body>
: Dette er hovedindholdsområdet på websiden, hvor du placerer det synlige indhold og brugergrænsefladeelementer.<form>
: Et formularelement, der kan indeholde inputfelter. I dette tilfælde bruges det til at indeholde det skjulte inputfelt, der vil blive udfyldt med dagens dato.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Dette er et skjult inputfelt. Det vises ikke på siden, men kan gemme data. Det er givet et ID på "hiddenDateField" og et navn på "hiddenDateField" til identifikation og brug i JavaScript.<script>
: Dette er åbningskoden for en JavaScript-scriptblok, hvor du kan skrive JavaScript-kode.function getFormattedDate() { ... }
: Dette definerer en JavaScript-funktion kaldetgetFormattedDate()
. Inde i denne funktion:- Det skaber en ny
Date
objekt, der repræsenterer den aktuelle dato og tid ved hjælp afconst today = new Date();
. - Den formaterer datoen til en streng med det ønskede format (mm/dd/åååå) vha
today.toLocaleDateString()
. Det'en-US'
argument angiver lokaliteten (amerikansk engelsk) for formatering og objektet medyear
,month
ogday
egenskaber definerer datoformatet.
- Det skaber en ny
return formattedDate;
: Denne linje returnerer den formaterede dato som en streng.document.getElementById('hiddenDateField').value = getFormattedDate();
: Denne kodelinje:- Du bruger
document.getElementById('hiddenDateField')
for at vælge det skjulte inputfelt med id'et "hiddenDateField." - Indstiller
value
egenskaben for det valgte inputfelt til den værdi, der returneres afgetFormattedDate()
fungere. Dette udfylder det skjulte felt med dagens dato i det angivne format.
- Du bruger
Slutresultatet er, at når siden indlæses, udfyldes det skjulte inputfelt med ID "hiddenDateField" med dagens dato i formatet mm/dd/åååå uden indledende nuller, som angivet i getFormattedDate()
funktion.
Sådan udfyldes et formularfelt med dagens dato og jQuery
<!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>
Denne HTML- og JavaScript-kode demonstrerer, hvordan man bruger jQuery til at udfylde et skjult inputfelt med dagens dato, formateret som mm/dd/åååå, uden indledende nuller. Lad os opdele det trin for trin:
<!DOCTYPE html>
,<html>
: Dette er standard HTML-dokumenterklæringer, der angiver, at dette er et HTML5-dokument.<head>
: Denne sektion bruges til at inkludere metadata og ressourcer til websiden.<title>
: Indstiller titlen på websiden til "Date Prepopulation with jQuery and JavaScript Date Object."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Denne linje inkluderer jQuery-biblioteket ved at angive dets kilde fra et indholdsleveringsnetværk (CDN). Det sikrer, at jQuery-biblioteket er tilgængeligt til brug på websiden.<body>
: Dette er hovedindholdsområdet på websiden, hvor du placerer det synlige indhold og brugergrænsefladeelementer.<form>
: Et HTML-formularelement, der bruges til at indeholde inputfelter. I dette tilfælde bruges det til at indkapsle det skjulte inputfelt.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Et skjult inputfelt, der ikke vil være synligt på websiden. Det er tildelt et ID på "hiddenDateField" og et navn på "hiddenDateField."<script>
: Dette er åbningskoden for en JavaScript-scriptblok, hvor du kan skrive JavaScript-kode.$(document).ready(function() { ... });
: Dette er en jQuery-kodeblok. Den bruger$(document).ready()
funktion for at sikre, at den indeholdte kode kører, efter at siden er fuldt indlæst. Inde i denne funktion:const today = new Date();
skaber et nytDate
objekt, der repræsenterer den aktuelle dato og klokkeslæt.const formattedDate = today.toLocaleDateString('en-US', { ... });
formaterer datoen til en streng med det ønskede format (mm/dd/åååå) ved hjælp aftoLocaleDateString
fremgangsmåde.
$('#hiddenDateField').val(formattedDate);
vælger det skjulte inputfelt med ID'et "hiddenDateField" ved hjælp af jQuery og indstiller detvalue
til den formaterede dato. Dette udfylder effektivt det skjulte felt med dagens dato i det angivne format.
jQuery-koden forenkler processen med at vælge og ændre det skjulte inputfelt sammenlignet med rent JavaScript. Når siden indlæses, udfyldes det skjulte inputfelt med dagens dato i formatet mm/dd/åååå, og der er ingen foranstillede nuller, som angivet i formattedDate
variabel.