Kiel Antaŭplenigi Formularan Kampon Kun Hodiaŭa Dato kaj JavaScript aŭ JQuery
Dum multaj solvoj ofertas la ŝancon konservi la daton kun ĉiu formo-eniro, estas aliaj tempoj, kiam ĝi ne estas eblo. Ni instigas niajn klientojn aldoni kaŝitan kampon al sia retejo kaj transdoni ĉi tiujn informojn kune kun la eniro, por ke ili povu spuri kiam enskriboj de formularoj estas enmetitaj. Uzante JavaScript, ĉi tio estas facila.
Kiel Antaŭplenigi Formularan Kampon Per Hodiaŭaj Dato kaj 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>
Ni malkonstruu la provizitan HTML- kaj JavaScript-kodon paŝon post paŝo:
<!DOCTYPE html>
kaj<html>
: Ĉi tiuj estas normaj HTML-dokumentaj deklaroj, kiuj specifas, ke ĉi tio estas HTML5-dokumento.<head>
: Ĉi tiu sekcio estas kutime uzata por inkluzivi metadatenojn pri la dokumento, kiel la titolo de la retpaĝo, kiu estas agordita per la<title>
elemento.<title>
: Ĉi tio fiksas la titolon de la retpaĝo al "Data Antaŭpopulacio kun JavaScript."<body>
: Ĉi tiu estas la ĉefa enhavareo de la retpaĝo, kie vi metas la videblajn enhavojn kaj uzantinterfacajn elementojn.<form>
: Formelemento kiu povas enhavi enigkampojn. En ĉi tiu kazo, ĝi estas uzata por enhavi la kaŝitan enigkampon, kiu estos plenigita kun la hodiaŭa dato.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ĉi tio estas kaŝita enigkampo. Ĝi ne aperas sur la paĝo sed povas konservi datumojn. Ĝi ricevas ID de "hiddenDateField" kaj nomo de "hiddenDateField" por identigo kaj uzo en JavaScript.<script>
: Ĉi tiu estas la malferma etikedo por JavaScript-skriptobloko, kie vi povas skribi JavaScript-kodon.function getFormattedDate() { ... }
: Ĉi tio difinas JavaScript-funkcion nomitangetFormattedDate()
. Ene de ĉi tiu funkcio:- Ĝi kreas novan
Date
objekto reprezentanta la aktualan daton kaj horon uzanteconst today = new Date();
. - Ĝi formatas la daton en ĉenon kun la dezirata formato (mm/dd/yyyy) uzante
today.toLocaleDateString()
. la'en-US'
argumento specifas la lokaĵon (usonangla) por formatado, kaj la objekton kunyear
,month
Kajday
propraĵoj difinas la datformaton.
- Ĝi kreas novan
return formattedDate;
: Ĉi tiu linio resendas la formatitan daton kiel ĉenon.document.getElementById('hiddenDateField').value = getFormattedDate();
: Ĉi tiu linio de kodo:- uzoj
document.getElementById('hiddenDateField')
elekti la kaŝitan enigkampon kun la ID "hiddenDateField." - Agordas la
value
posedaĵo de la elektita enigkampo al la valoro redonita de lagetFormattedDate()
funkcio. Ĉi tio plenigas la kaŝitan kampon kun la hodiaŭa dato en la specifita formato.
- uzoj
La fina rezulto estas, ke kiam la paĝo ŝarĝas, la kaŝita enigokampo kun ID "hiddenDateField" estas plenigita kun la hodiaŭa dato en la formato mm/dd/yyyy sen antaŭaj nuloj, kiel specifite en la getFormattedDate()
funkcio
Kiel Antaŭplenigi Formulan Kampon Kun Hodiaŭa Dato kaj 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>
Ĉi tiu HTML kaj JavaScript-kodo montras kiel uzi jQuery por antaŭplenigi kaŝitan enigkampon kun la hodiaŭa dato, formatita kiel mm/dd/yyyy, sen antaŭaj nuloj. Ni malkonstruu ĝin paŝon post paŝo:
<!DOCTYPE html>
kaj<html>
: Ĉi tiuj estas normaj HTML-dokumentdeklaroj indikante ke tio estas HTML5-dokumento.<head>
: Ĉi tiu sekcio estas uzata por inkluzivi metadatenojn kaj rimedojn por la retpaĝo.<title>
: Agordas la titolon de la retpaĝo al "Data Antaŭpopulado kun jQuery kaj JavaScript Data Objekto."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Ĉi tiu linio inkluzivas la bibliotekon jQuery specifante ĝian fonton de enhavo-livera reto (CDN). Ĝi certigas, ke la biblioteko jQuery estas disponebla por uzo en la retpaĝo.<body>
: Ĉi tiu estas la ĉefa enhavareo de la retpaĝo, kie vi metas la videblajn enhavojn kaj uzantinterfacajn elementojn.<form>
: HTML-formularo uzata por enhavi enigkampojn. En ĉi tiu kazo, ĝi estas uzata por enkapsuligi la kaŝitan enigkampon.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: kaŝita enigkampo kiu ne estos videbla sur la retpaĝo. Ĝi estas asignita ID de "hiddenDateField" kaj nomo de "hiddenDateField."<script>
: Ĉi tiu estas la malferma etikedo por JavaScript-skriptobloko kie vi povas skribi JavaScript-kodon.$(document).ready(function() { ... });
: Ĉi tio estas jQuery-kodbloko. Ĝi uzas la$(document).ready()
funkcio por certigi, ke la enhavita kodo funkcias post kiam la paĝo plene ŝargis. Ene de ĉi tiu funkcio:const today = new Date();
kreas novanDate
objekto reprezentanta la aktualan daton kaj horon.const formattedDate = today.toLocaleDateString('en-US', { ... });
formatas la daton en ĉenon kun la dezirata formato (mm/dd/yyyy) uzante latoLocaleDateString
metodo.
$('#hiddenDateField').val(formattedDate);
elektas la kaŝitan enigkampon kun la ID "hiddenDateField" uzante jQuery kaj fiksas ĝianvalue
al la formatita dato. Ĉi tio efektive antaŭplenigas la kaŝitan kampon kun la hodiaŭa dato en la specifita formato.
La jQuery-kodo simpligas la procezon elekti kaj modifi la kaŝitan enigkampon kompare kun pura JavaScript. Kiam la paĝo ŝarĝas, la kaŝita enigkampo estas plenigita kun la hodiaŭa dato en la formato mm/dd/yyyy, kaj neniuj antaŭaj nuloj ĉeestas, kiel specifite en la formattedDate
variablo.