Ako vopred vyplniť pole formulára s dnešným dátumom a JavaScriptom alebo JQuery
Zatiaľ čo mnohé riešenia ponúkajú možnosť uložiť dátum pri každom zadaní formulára, v iných prípadoch to nie je možné. Odporúčame našim klientom, aby na svoje stránky pridali skryté pole a odovzdali tieto informácie spolu so záznamom, aby mohli sledovať, kedy sú zadané položky formulára. Pomocou JavaScriptu je to jednoduché.
Ako vopred vyplniť pole formulára s dnešným dátumom a 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>
Poďme krok za krokom rozobrať poskytnutý kód HTML a JavaScript:
<!DOCTYPE html>
a<html>
: Toto sú štandardné deklarácie dokumentu HTML, ktoré uvádzajú, že ide o dokument HTML5.<head>
: Táto sekcia sa zvyčajne používa na zahrnutie metadát o dokumente, ako je napríklad názov webovej stránky, ktorý sa nastavuje pomocou<title>
prvok.<title>
: Týmto sa nastaví názov webovej stránky na „Predbežné vyplnenie dátumu pomocou JavaScriptu“.<body>
: Toto je hlavná obsahová oblasť webovej stránky, kde umiestňujete viditeľný obsah a prvky používateľského rozhrania.<form>
: Prvok formulára, ktorý môže obsahovať vstupné polia. V tomto prípade sa používa na to, aby obsahovalo skryté vstupné pole, ktoré bude vyplnené dnešným dátumom.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Toto je skryté vstupné pole. Nezobrazuje sa na stránke, ale môže ukladať údaje. Je mu pridelené ID „hiddenDateField“ a názov „hiddenDateField“ na identifikáciu a použitie v JavaScripte.<script>
: Toto je úvodná značka pre blok skriptu JavaScript, do ktorého môžete napísať kód JavaScript.function getFormattedDate() { ... }
: Toto definuje funkciu JavaScriptu s názvomgetFormattedDate()
. Vo vnútri tejto funkcie:- Vytvára nový
Date
objekt predstavujúci aktuálny dátum a čas pomocouconst today = new Date();
. - Formátuje dátum do reťazca s požadovaným formátom (mm/dd/rrrr) pomocou
today.toLocaleDateString()
,'en-US'
argument určuje miestne nastavenie (americká angličtina) pre formátovanie a objekt syear
,month
aday
vlastnosti definuje formát dátumu.
- Vytvára nový
return formattedDate;
: Tento riadok vráti formátovaný dátum ako reťazec.document.getElementById('hiddenDateField').value = getFormattedDate();
: Tento riadok kódu:- použitie
document.getElementById('hiddenDateField')
vyberte skryté vstupné pole s ID „hiddenDateField“. - Nastaví
value
vlastnosti vybratého vstupného poľa na hodnotu vrátenú parametromgetFormattedDate()
funkciu. Toto vyplní skryté pole dnešným dátumom v zadanom formáte.
- použitie
Konečným výsledkom je, že pri načítaní stránky sa skryté vstupné pole s ID „hiddenDateField“ vyplní dnešným dátumom vo formáte mm/dd/rrrr bez úvodných núl, ako je uvedené v getFormattedDate()
funkcie.
Ako vopred vyplniť pole formulára s dnešným dátumom a 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>
Tento kód HTML a JavaScript ukazuje, ako použiť jQuery na predvyplnenie skrytého vstupného poľa dnešným dátumom vo formáte mm/dd/rrrr bez úvodných núl. Poďme si to rozobrať krok za krokom:
<!DOCTYPE html>
a<html>
: Toto sú štandardné deklarácie dokumentu HTML, ktoré označujú, že ide o dokument HTML5.<head>
: Táto sekcia sa používa na zahrnutie metadát a zdrojov pre webovú stránku.<title>
: Nastaví názov webovej stránky na „Predvyplnenie dátumu pomocou jQuery a objektu JavaScript Date Object“.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Tento riadok obsahuje knižnicu jQuery uvedením jej zdroja zo siete na doručovanie obsahu (CDN). Zabezpečuje, že knižnica jQuery je dostupná na použitie na webovej stránke.<body>
: Toto je hlavná obsahová oblasť webovej stránky, kde umiestňujete viditeľný obsah a prvky používateľského rozhrania.<form>
: Prvok formulára HTML, ktorý obsahuje vstupné polia. V tomto prípade sa používa na zapuzdrenie skrytého vstupného poľa.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Skryté vstupné pole, ktoré nebude viditeľné na webovej stránke. Je mu priradené ID „hiddenDateField“ a názov „hiddenDateField“.<script>
: Toto je úvodná značka pre blok skriptu JavaScript, do ktorého môžete napísať kód JavaScript.$(document).ready(function() { ... });
: Toto je blok kódu jQuery. Používa sa$(document).ready()
funkcia, ktorá zabezpečí, že obsiahnutý kód sa spustí po úplnom načítaní stránky. Vo vnútri tejto funkcie:const today = new Date();
vytvára novýDate
objekt predstavujúci aktuálny dátum a čas.const formattedDate = today.toLocaleDateString('en-US', { ... });
naformátuje dátum do reťazca s požadovaným formátom (mm/dd/rrrr) pomocoutoLocaleDateString
metóda.
$('#hiddenDateField').val(formattedDate);
vyberie skryté vstupné pole s ID „hiddenDateField“ pomocou jQuery a nastaví hovalue
k naformátovanému dátumu. Toto efektívne predvyplní skryté pole dnešným dátumom v zadanom formáte.
Kód jQuery zjednodušuje proces výberu a úpravy skrytého vstupného poľa v porovnaní s čistým JavaScriptom. Keď sa stránka načíta, skryté vstupné pole sa vyplní dnešným dátumom vo formáte mm/dd/rrrr a nie sú prítomné žiadne úvodné nuly, ako je uvedené v formattedDate
variabilné.