Nola bete inprimaki-eremu bat gaurko datarekin eta JavaScript edo JQueryrekin
Irtenbide askok inprimakiko sarrera bakoitzarekin data gordetzeko aukera eskaintzen duten arren, badaude aukerarik ez den beste batzuetan. Gure bezeroak bere webgunean ezkutuko eremu bat gehitzera animatzen ditugu eta informazio hori sarrerarekin batera pasatzera, inprimakiko sarrerak noiz sartzen diren jarrai dezaten. JavaScript erabiliz, hau erraza da.
Nola bete inprimaki-eremu bat gaurko datarekin eta JavaScriptekin
<!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>
Apurtu dezagun emandako HTML eta JavaScript kodea urratsez urrats:
<!DOCTYPE html>
<html>
: HTML5 dokumentu bat dela zehazten duten HTML dokumentuen adierazpen estandarrak dira.<head>
: atal hau normalean dokumentuari buruzko metadatuak sartzeko erabiltzen da, hala nola web-orriaren izenburua, hau erabiliz ezartzen dena.<title>
elementua.<title>
: Honek web-orriaren izenburua "JavaScript-ekin aurrez betetzeko data" gisa ezartzen du.<body>
: Web-orriko eduki-eremu nagusia da, non ikusgai dauden edukiak eta erabiltzaile-interfazearen elementuak jartzen dituzun.<form>
: sarrera-eremuak izan ditzakeen inprimaki-elementua. Kasu honetan, gaurko datarekin beteko den ezkutuko sarrera-eremua edukitzeko erabiltzen da.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ezkutuko sarrera-eremu bat da. Ez da orrialdean agertzen baina datuak gorde ditzake. "hiddenDateField" ID bat eta "hiddenDateField" izena ematen zaio JavaScript-en identifikatzeko eta erabiltzeko.<script>
: JavaScript script bloke baten hasierako etiketa da, non JavaScript kodea idatz dezakezun.function getFormattedDate() { ... }
: honek izeneko JavaScript funtzio bat definitzen dugetFormattedDate()
. Funtzio honen barruan:- Berri bat sortzen du
Date
uneko data eta ordua adierazten duen objektua erabilizconst today = new Date();
. - Data nahi duzun formatuarekin (mm/dd/aaaa) kate batean formateatzen du erabiliz
today.toLocaleDateString()
. The'en-US'
argumentuak formateatzeko lokalizazioa (ingeles amerikarra) eta honekin duen objektua zehazten duyear
,month
, etaday
propietateak data formatua definitzen du.
- Berri bat sortzen du
return formattedDate;
: Lerro honek formateatutako data kate gisa itzultzen du.document.getElementById('hiddenDateField').value = getFormattedDate();
: Kode lerro hau:- erabilerak
document.getElementById('hiddenDateField')
"hiddenDateField" IDarekin ezkutuko sarrera-eremua hautatzeko. - Ezartzen du
value
hautatutako sarrera-eremuaren propietateak itzultzen duen balioarekingetFormattedDate()
funtzioa. Honek ezkutuko eremua gaurko datarekin betetzen du zehaztutako formatuan.
- erabilerak
Azken emaitza da orria kargatzen denean, "hiddenDateField" ID-a duen ezkutuko sarrera-eremua gaurko datarekin betetzen dela, mm/dd/yyyy formatuan, zero hasierako puntuan zehaztutako moduan. getFormattedDate()
funtzioa.
Nola bete inprimaki-eremu bat gaurko datarekin eta jQueryrekin
<!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>
HTML eta JavaScript kode honek jQuery nola erabili erakusten du ezkutuko sarrera-eremu bat gaurko datarekin, mm/dd/aaaa gisa formatua, lehen zerorik gabe betetzeko. Apurtu dezagun urratsez urrats:
<!DOCTYPE html>
<html>
: HTML5 dokumentu bat dela adierazten duten HTML dokumentu estandarrak dira.<head>
: Atal hau web-orrirako metadatuak eta baliabideak sartzeko erabiltzen da.<title>
: Web-orriaren izenburua "Data aurrepopulatzea jQuery eta JavaScript Data Object-ekin" gisa ezartzen du.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Lerro honek jQuery liburutegia barne hartzen du bere iturria edukiak bidaltzeko sare batetik (CDN) zehaztuz. jQuery liburutegia web orrian erabiltzeko erabilgarri dagoela ziurtatzen du.<body>
: Web-orriko eduki-eremu nagusia da, non ikusgai dauden edukiak eta erabiltzaile-interfazearen elementuak jartzen dituzun.<form>
: sarrera-eremuak edukitzeko erabiltzen den HTML inprimaki-elementua. Kasu honetan, ezkutuko sarrera-eremua kapsulatzeko erabiltzen da.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Web-orrian ikusgai egongo ez den sarrera-eremu ezkutua. "hiddenDateField" ID bat eta "hiddenDateField" izena esleitzen zaizkio.<script>
: JavaScript kodea idatzi dezakezun JavaScript script bloke baten hasierako etiketa da.$(document).ready(function() { ... });
: Hau jQuery kode bloke bat da. Erabiltzen du$(document).ready()
funtzioa edukitako kodea orria guztiz kargatu ondoren exekutatzen dela ziurtatzeko. Funtzio honen barruan:const today = new Date();
berri bat sortzen duDate
uneko data eta ordua adierazten duen objektua.const formattedDate = today.toLocaleDateString('en-US', { ... });
data kate batean formateatzen du nahi duzun formatuan (mm/dd/aaaa) erabiliztoLocaleDateString
metodoa.
$('#hiddenDateField').val(formattedDate);
"hiddenDateField" IDarekin ezkutuko sarrera-eremua hautatzen du jQuery erabiliz eta berevalue
formateatutako datara. Honek ezkutuko eremua gaurko datarekin aurrez beteko du zehaztutako formatuan.
jQuery kodeak ezkutuko sarrera-eremua hautatzeko eta aldatzeko prozesua errazten du JavaScript hutsarekin alderatuta. Orria kargatzen denean, ezkutuko sarrera-eremua gaurko datarekin betetzen da mm/dd/aaaa formatuan, eta ez dago hasierako zerorik, atalean zehaztu bezala. formattedDate
aldakorra.