Kako vnaprej izpolniti polje obrazca z današnjim datumom in JavaScriptom ali JQueryjem
Čeprav številne rešitve ponujajo možnost shranjevanja datuma z vsakim vnosom v obrazec, včasih to ni mogoče. Naše stranke spodbujamo, da na svoje spletno mesto dodajo skrito polje in te podatke posredujejo skupaj z vnosom, da lahko spremljajo, kdaj so vneseni vnosi v obrazec. Z uporabo JavaScripta je to enostavno.
Kako vnaprej izpolniti polje obrazca z današnjim datumom in JavaScriptom
<!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>
Razčlenimo ponujeno kodo HTML in JavaScript korak za korakom:
<!DOCTYPE html>
in<html>
: To so standardne deklaracije dokumentov HTML, ki določajo, da je to dokument HTML5.<head>
: ta razdelek se običajno uporablja za vključitev metapodatkov o dokumentu, kot je naslov spletne strani, ki je nastavljen z<title>
element.<title>
: To nastavi naslov spletne strani na »Datum Prednaselitev z JavaScriptom«.<body>
: To je glavno vsebinsko področje spletne strani, kamor postavite vidno vsebino in elemente uporabniškega vmesnika.<form>
: Element obrazca, ki lahko vsebuje vnosna polja. V tem primeru se uporablja za skrito vnosno polje, ki bo zapolnjeno z današnjim datumom.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: To je skrito polje za vnos. Ne prikaže se na strani, lahko pa shrani podatke. Podan mu je ID »hiddenDateField« in ime »hiddenDateField« za identifikacijo in uporabo v JavaScriptu.<script>
: To je začetna oznaka za blok skripta JavaScript, kamor lahko pišete kodo JavaScript.function getFormattedDate() { ... }
: To definira funkcijo JavaScript, imenovanogetFormattedDate()
. Znotraj te funkcije:- Ustvarja novo
Date
objekt, ki predstavlja trenutni datum in čas z uporaboconst today = new Date();
. - Datum oblikuje v niz z želeno obliko (mm/dd/llll).
today.toLocaleDateString()
.'en-US'
argument določa področne nastavitve (ameriška angleščina) za oblikovanje in predmet zyear
,month
inday
lastnosti določa obliko datuma.
- Ustvarja novo
return formattedDate;
: Ta vrstica vrne formatirani datum kot niz.document.getElementById('hiddenDateField').value = getFormattedDate();
: Ta vrstica kode:- uporabljate
document.getElementById('hiddenDateField')
da izberete skrito vnosno polje z ID-jem »hiddenDateField«. - Nastavi
value
lastnosti izbranega vnosnega polja na vrednost, ki jo vrnegetFormattedDate()
funkcijo. To zapolni skrito polje z današnjim datumom v podani obliki.
- uporabljate
Končni rezultat je, da se ob nalaganju strani skrito vnosno polje z ID-jem »hiddenDateField« izpolni z današnjim datumom v obliki mm/dd/llll brez začetnih ničel, kot je določeno v getFormattedDate()
Funkcija.
Kako vnaprej izpolniti polje obrazca z današnjim datumom in 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>
Ta koda HTML in JavaScript prikazuje, kako uporabiti jQuery za vnaprejšnjo izpolnitev skritega vnosnega polja z današnjim datumom, oblikovanim kot mm/dd/llll, brez začetnih ničel. Razčlenimo korak za korakom:
<!DOCTYPE html>
in<html>
: To so standardne deklaracije dokumentov HTML, ki označujejo, da gre za dokument HTML5.<head>
: Ta razdelek se uporablja za vključitev metapodatkov in virov za spletno stran.<title>
: Nastavi naslov spletne strani na »Prednastavitev datuma z datumskim objektom jQuery in JavaScript«.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Ta vrstica vključuje knjižnico jQuery z navedbo njenega vira iz omrežja za dostavo vsebine (CDN). Zagotavlja, da je knjižnica jQuery na voljo za uporabo na spletni strani.<body>
: To je glavno vsebinsko področje spletne strani, kamor postavite vidno vsebino in elemente uporabniškega vmesnika.<form>
: element obrazca HTML, ki se uporablja za vnosna polja. V tem primeru se uporablja za enkapsulacijo skritega vnosnega polja.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: skrito vnosno polje, ki ne bo vidno na spletni strani. Dodeljen mu je ID »hiddenDateField« in ime »hiddenDateField«.<script>
: To je začetna oznaka za blok skripta JavaScript, kamor lahko pišete kodo JavaScript.$(document).ready(function() { ... });
: To je kodni blok jQuery. Uporablja$(document).ready()
funkcijo za zagotovitev, da se vsebovana koda izvaja po tem, ko se stran v celoti naloži. Znotraj te funkcije:const today = new Date();
ustvari novoDate
objekt, ki predstavlja trenutni datum in čas.const formattedDate = today.toLocaleDateString('en-US', { ... });
formatira datum v niz z želeno obliko (mm/dd/llll) z uporabotoLocaleDateString
metoda.
$('#hiddenDateField').val(formattedDate);
izbere skrito vnosno polje z ID-jem »hiddenDateField« z uporabo jQuery in nastavi njegovovalue
na formatirani datum. To skrito polje dejansko vnaprej izpolni z današnjim datumom v podani obliki.
Koda jQuery poenostavi postopek izbire in spreminjanja skritega vnosnega polja v primerjavi s čistim JavaScriptom. Ko se stran naloži, je skrito polje za vnos izpolnjeno z današnjim datumom v formatu mm/dd/llll in ni prisotnih začetnih ničel, kot je določeno v formattedDate
spremenljivka.