Hur man förfyller ett formulärfält med dagens datum och JavaScript eller JQuery
Medan många lösningar erbjuder möjligheten att lagra datumet med varje formulärinmatning, finns det andra tillfällen då det inte är ett alternativ. Vi uppmuntrar våra kunder att lägga till ett dolt fält på sin webbplats och skicka denna information tillsammans med posten så att de kan spåra när formulärposter skrivs in. Med JavaScript är detta enkelt.
Hur man förfyller ett formulärfält med dagens datum och 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>
Låt oss dela upp den medföljande HTML- och JavaScript-koden steg för steg:
<!DOCTYPE html>
och<html>
: Dessa är standarddeklarationer för HTML-dokument som anger att detta är ett HTML5-dokument.<head>
: Det här avsnittet används vanligtvis för att inkludera metadata om dokumentet, som titeln på webbsidan, som ställs in med<title>
elementet.<title>
: Detta ställer in titeln på webbsidan till "Datum Prepopulation with JavaScript."<body>
: Detta är huvudinnehållsområdet på webbsidan där du placerar det synliga innehållet och användargränssnittselementen.<form>
: Ett formulärelement som kan innehålla inmatningsfält. I det här fallet används det för att innehålla det dolda inmatningsfältet som kommer att fyllas i med dagens datum.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Detta är ett dolt inmatningsfält. Det visas inte på sidan men kan lagra data. Den har fått ett ID för "hiddenDateField" och ett namn på "hiddenDateField" för identifiering och användning i JavaScript.<script>
: Detta är öppningstaggen för ett JavaScript-skriptblock, där du kan skriva JavaScript-kod.function getFormattedDate() { ... }
: Detta definierar en JavaScript-funktion som kallasgetFormattedDate()
. Inuti denna funktion:- Det skapar ett nytt
Date
objekt som representerar aktuellt datum och tid med hjälp avconst today = new Date();
. - Den formaterar datumet till en sträng med önskat format (mm/dd/åååå) med hjälp av
today.toLocaleDateString()
. De'en-US'
argument anger lokalen (amerikansk engelska) för formatering och objektet medyear
,month
ochday
egenskaper definierar datumformatet.
- Det skapar ett nytt
return formattedDate;
: Den här raden returnerar det formaterade datumet som en sträng.document.getElementById('hiddenDateField').value = getFormattedDate();
: Denna kodrad:- du använder
document.getElementById('hiddenDateField')
för att välja det dolda inmatningsfältet med ID:t "hiddenDateField." - Ställer in
value
egenskapen för det valda inmatningsfältet till värdet som returneras avgetFormattedDate()
fungera. Detta fyller det dolda fältet med dagens datum i det angivna formatet.
- du använder
Slutresultatet är att när sidan laddas fylls det dolda inmatningsfältet med ID "hiddenDateField" i med dagens datum i formatet mm/dd/åååå utan inledande nollor, som specificerats i getFormattedDate()
funktion.
Hur man förfyller ett formulärfält med dagens datum och 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>
Den här HTML- och JavaScript-koden visar hur man använder jQuery för att förfylla ett dolt inmatningsfält med dagens datum, formaterat som mm/dd/åååå, utan inledande nollor. Låt oss dela upp det steg för steg:
<!DOCTYPE html>
och<html>
: Dessa är standarddeklarationer för HTML-dokument som anger att detta är ett HTML5-dokument.<head>
: Det här avsnittet används för att inkludera metadata och resurser för webbsidan.<title>
: Ställer in webbsidans titel till "Date Prepopulation with jQuery and JavaScript Date Object."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Den här raden inkluderar jQuery-biblioteket genom att ange dess källa från ett innehållsleveransnätverk (CDN). Det säkerställer att jQuery-biblioteket är tillgängligt för användning på webbsidan.<body>
: Detta är huvudinnehållsområdet på webbsidan där du placerar det synliga innehållet och användargränssnittselementen.<form>
: Ett HTML-formulärelement som används för att innehålla inmatningsfält. I det här fallet används den för att kapsla in det dolda inmatningsfältet.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ett dolt inmatningsfält som inte kommer att vara synligt på webbsidan. Den har tilldelats ett ID för "hiddenDateField" och namnet "hiddenDateField."<script>
: Detta är öppningstaggen för ett JavaScript-skriptblock där du kan skriva JavaScript-kod.$(document).ready(function() { ... });
: Detta är ett jQuery-kodblock. Den använder$(document).ready()
funktion för att säkerställa att den inneslutna koden körs efter att sidan har laddats helt. Inuti denna funktion:const today = new Date();
skapar en nyDate
objekt som representerar aktuellt datum och tid.const formattedDate = today.toLocaleDateString('en-US', { ... });
formaterar datumet till en sträng med önskat format (mm/dd/åååå) med hjälp avtoLocaleDateString
metod.
$('#hiddenDateField').val(formattedDate);
väljer det dolda inmatningsfältet med ID "hiddenDateField" med jQuery och ställer in dessvalue
till det formaterade datumet. Detta fyller effektivt i det dolda fältet med dagens datum i det angivna formatet.
jQuery-koden förenklar processen att välja och ändra det dolda inmatningsfältet jämfört med rent JavaScript. När sidan laddas fylls det dolda inmatningsfältet i med dagens datum i formatet mm/dd/åååå, och inga inledande nollor finns, enligt vad som anges i formattedDate
variabel.