Hogyan lehet előre kitölteni egy űrlapmezőt a mai dátummal és JavaScripttel vagy JQuery-vel
Míg sok megoldás lehetőséget kínál a dátum tárolására minden űrlapbejegyzésnél, máskor ez nem lehetséges. Arra biztatjuk ügyfeleinket, hogy adjanak hozzá egy rejtett mezőt webhelyükhöz, és adják át ezt az információt a bejegyzéssel együtt, hogy nyomon tudják követni az űrlapbejegyzések beírását. JavaScript használatával ez egyszerű.
Hogyan lehet előre kitölteni egy űrlapmezőt a mai dátummal és JavaScripttel
<!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épésről lépésre bontsuk fel a megadott HTML és JavaScript kódot:
<!DOCTYPE html>
és a<html>
: Ezek szabványos HTML-dokumentum-deklarációk, amelyek meghatározzák, hogy ez egy HTML5-dokumentum.<head>
: Ez a rész általában a dokumentum metaadatainak megadására szolgál, például a weboldal címére, amelyet a<title>
elem.<title>
: Ezzel a weboldal címét a következőre állítja: „Dátum előre feltöltése JavaScripttel”.<body>
: Ez a weboldal fő tartalmi területe, ahol elhelyezheti a látható tartalmat és a felhasználói felület elemeit.<form>
: Olyan űrlapelem, amely beviteli mezőket tartalmazhat. Ebben az esetben ez a rejtett beviteli mezőt tartalmazza, amely a mai dátummal lesz feltöltve.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ez egy rejtett beviteli mező. Nem jelenik meg az oldalon, de adatokat tárolhat. A JavaScriptben való azonosítás és használat érdekében „hiddenDateField” azonosítót és „hiddenDateField” nevet kapott.<script>
: Ez egy JavaScript szkriptblokk nyitócímkéje, ahová JavaScript kódot írhat.function getFormattedDate() { ... }
: Ez egy úgynevezett JavaScript függvényt határoz meggetFormattedDate()
. Ezen a funkción belül:- Újat hoz létre
Date
objektum, amely az aktuális dátumot és időt reprezentáljaconst today = new Date();
. - A dátumot a kívánt formátumú (hh/nn/éééé) karakterláncba formálja a segítségével
today.toLocaleDateString()
Az'en-US'
Az argumentum megadja a formázáshoz szükséges területi beállítást (amerikai angol), és az objektumotyear
,month
ésday
tulajdonság határozza meg a dátumformátumot.
- Újat hoz létre
return formattedDate;
: Ez a sor karakterláncként adja vissza a formázott dátumot.document.getElementById('hiddenDateField').value = getFormattedDate();
: Ez a kódsor:- Felhasználás
document.getElementById('hiddenDateField')
a „hiddenDateField” azonosítójú rejtett beviteli mező kiválasztásához. - Beállítja a
value
a kiválasztott beviteli mező tulajdonságát a visszaadott értékregetFormattedDate()
funkció. Ez feltölti a rejtett mezőt a mai dátummal a megadott formátumban.
- Felhasználás
A végeredmény az, hogy az oldal betöltésekor a „hiddenDateField” azonosítójú rejtett beviteli mező a mai dátummal lesz feltöltve a következő formátumban: mm/nn/yyyy, kezdő nullák nélkül, amint azt a getFormattedDate()
funkciót.
Hogyan lehet előre kitölteni egy űrlapmezőt a mai dátummal és a jQuery-vel
<!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>
Ez a HTML- és JavaScript-kód bemutatja, hogyan lehet a jQuery használatával előre kitölteni egy rejtett beviteli mezőt a mai dátummal, éééé.hh/nn formátumban, kezdő nullák nélkül. Bontsuk le lépésről lépésre:
<!DOCTYPE html>
és a<html>
: Ezek szabványos HTML-dokumentum-deklarációk, amelyek jelzik, hogy ez egy HTML5-dokumentum.<head>
: Ez a rész a weboldal metaadatainak és erőforrásainak megadására szolgál.<title>
: Beállítja a weboldal címét „Dátum előpopuláció jQuery és JavaScript dátumobjektum segítségével”.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Ez a sor tartalmazza a jQuery könyvtárat a tartalomszolgáltató hálózatból (CDN) származó forrás megadásával. Ez biztosítja, hogy a jQuery könyvtár elérhető legyen a weboldalon.<body>
: Ez a weboldal fő tartalmi területe, ahol elhelyezheti a látható tartalmat és a felhasználói felület elemeit.<form>
: HTML űrlapelem, amely beviteli mezőket tartalmaz. Ebben az esetben a rejtett beviteli mező beágyazására szolgál.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Rejtett beviteli mező, amely nem lesz látható a weboldalon. Hozzá van rendelve egy „hiddenDateField” azonosító és „hiddenDateField” név.<script>
: Ez egy JavaScript szkriptblokk nyitócímkéje, amelybe JavaScript kódot írhat.$(document).ready(function() { ... });
: Ez egy jQuery kódblokk. Használja a$(document).ready()
funkció biztosítja, hogy a benne lévő kód az oldal teljes betöltése után lefusson. Ezen a funkción belül:const today = new Date();
újat hoz létreDate
objektum, amely az aktuális dátumot és időt reprezentálja.const formattedDate = today.toLocaleDateString('en-US', { ... });
a dátumot a kívánt formátumú (hh/nn/éééé) karakterláncba formálja a segítségéveltoLocaleDateString
módszer.
$('#hiddenDateField').val(formattedDate);
kiválasztja a „hiddenDateField” azonosítójú rejtett beviteli mezőt a jQuery segítségével, és beállítjavalue
a formázott dátumig. Ez gyakorlatilag előre kitölti a rejtett mezőt a mai dátummal a megadott formátumban.
A jQuery kód leegyszerűsíti a rejtett beviteli mező kiválasztásának és módosításának folyamatát a tiszta JavaScript-hez képest. Amikor az oldal betöltődik, a rejtett beviteli mező a mai dátummal van feltöltve éééé/hh/nn formátumban, és nincsenek benne kezdő nullák, amint azt a formattedDate
változót.