Kako unaprijed popuniti polje obrasca s današnjim datumom i JavaScriptom ili JQueryjem
Iako mnoga rješenja nude mogućnost pohranjivanja datuma sa svakim unosom u obrazac, postoje slučajevi kada to nije opcija. Potičemo naše klijente da dodaju skriveno polje na svoje web mjesto i proslijede ove podatke zajedno s unosom kako bi mogli pratiti kada se unose obrasci. Koristeći JavaScript, ovo je jednostavno.
Kako unaprijed popuniti polje obrasca s današnjim datumom i 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>
Raščlanimo navedeni HTML i JavaScript kod korak po korak:
<!DOCTYPE html>
i<html>
: Ovo su standardne deklaracije HTML dokumenta koje navode da je ovo HTML5 dokument.<head>
: Ovaj se odjeljak obično koristi za uključivanje metapodataka o dokumentu, kao što je naslov web stranice, koji se postavlja pomoću<title>
element.<title>
: Ovo postavlja naslov web-stranice na "Pretpopulacija datuma s JavaScriptom."<body>
: Ovo je područje glavnog sadržaja web-stranice na koje postavljate vidljivi sadržaj i elemente korisničkog sučelja.<form>
: Element obrasca koji može sadržavati polja za unos. U ovom slučaju koristi se za sadržavanje skrivenog polja za unos koje će biti popunjeno današnjim datumom.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ovo je skriveno polje za unos. Ne pojavljuje se na stranici, ali može pohraniti podatke. Dodijeljen mu je ID "hiddenDateField" i naziv "hiddenDateField" za identifikaciju i upotrebu u JavaScriptu.<script>
: Ovo je početna oznaka za blok JavaScript skripte, gdje možete pisati JavaScript kod.function getFormattedDate() { ... }
: Ovo definira JavaScript funkciju koja se zovegetFormattedDate()
. Unutar ove funkcije:- Stvara novi
Date
objekt koji predstavlja trenutni datum i vrijeme pomoćuconst today = new Date();
. - On formatira datum u niz u željenom formatu (mm/dd/gggg).
today.toLocaleDateString()
,'en-US'
argument navodi lokalizaciju (američki engleski) za oblikovanje, a objekt sayear
,month
iday
svojstva definira format datuma.
- Stvara novi
return formattedDate;
: Ovaj redak vraća formatirani datum kao niz.document.getElementById('hiddenDateField').value = getFormattedDate();
: Ovaj redak koda:- Koristi
document.getElementById('hiddenDateField')
za odabir skrivenog polja za unos s ID-om "hiddenDateField." - Postavlja
value
svojstvo odabranog polja za unos na vrijednost koju vraćagetFormattedDate()
funkcija. Time se skriveno polje popunjava današnjim datumom u navedenom formatu.
- Koristi
Krajnji rezultat je da kada se stranica učita, skriveno polje za unos s ID-om "hiddenDateField" popunjava se današnjim datumom u formatu mm/dd/gggg bez vodećih nula, kao što je navedeno u getFormattedDate()
funkcija.
Kako unaprijed popuniti polje obrasca s današnjim datumom i jQueryjem
<!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>
Ovaj HTML i JavaScript kôd demonstrira kako koristiti jQuery za prethodno popunjavanje skrivenog polja za unos današnjim datumom, formatiranim kao mm/dd/gggg, bez nula na početku. Razdvojimo korak po korak:
<!DOCTYPE html>
i<html>
: Ovo su standardne deklaracije HTML dokumenta koje pokazuju da je ovo HTML5 dokument.<head>
: Ovaj se odjeljak koristi za uključivanje metapodataka i resursa za web stranicu.<title>
: Postavlja naslov web-stranice na "Pretpopulacija datuma s jQuery i JavaScript objektom datuma."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Ovaj redak uključuje jQuery biblioteku navodeći njezin izvor iz mreže za isporuku sadržaja (CDN). Osigurava da je biblioteka jQuery dostupna za korištenje na web stranici.<body>
: Ovo je područje glavnog sadržaja web-stranice na koje postavljate vidljivi sadržaj i elemente korisničkog sučelja.<form>
: Element HTML obrasca koji se koristi za sadržavanje polja za unos. U ovom slučaju, koristi se za kapsuliranje skrivenog polja za unos.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: skriveno polje za unos koje neće biti vidljivo na web stranici. Dodijeljen mu je ID "hiddenDateField" i naziv "hiddenDateField".<script>
: Ovo je početna oznaka za blok JavaScript skripte gdje možete pisati JavaScript kod.$(document).ready(function() { ... });
: Ovo je jQuery blok koda. Koristi se$(document).ready()
kako bi se osiguralo pokretanje sadržanog koda nakon što se stranica u potpunosti učita. Unutar ove funkcije:const today = new Date();
stvara noviDate
objekt koji predstavlja trenutni datum i vrijeme.const formattedDate = today.toLocaleDateString('en-US', { ... });
oblikuje datum u niz sa željenim formatom (mm/dd/gggg) pomoćutoLocaleDateString
metoda.
$('#hiddenDateField').val(formattedDate);
odabire skriveno polje za unos s ID-om “hiddenDateField” koristeći jQuery i postavlja svojevalue
na formatirani datum. Ovo efektivno unaprijed popunjava skriveno polje današnjim datumom u navedenom formatu.
jQuery kôd pojednostavljuje postupak odabira i izmjene skrivenog polja za unos u usporedbi s čistim JavaScriptom. Kada se stranica učita, skriveno polje za unos popunjava se današnjim datumom u mm/dd/gggg formatu i nema vodećih nula, kao što je navedeno u formattedDate
promjenjiva.