Cum să prepopulați un câmp de formular cu data de astăzi și JavaScript sau JQuery
În timp ce multe soluții oferă posibilitatea de a stoca data cu fiecare intrare de formular, există alte momente când nu este o opțiune. Încurajăm clienții noștri să adauge un câmp ascuns pe site-ul lor și să transmită aceste informații împreună cu intrarea, astfel încât să poată urmări când sunt introduse intrările din formular. Folosind JavaScript, acest lucru este ușor.
Cum să prepopulați un câmp de formular cu data de astăzi și 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>
Să defalcăm codul HTML și JavaScript furnizat pas cu pas:
<!DOCTYPE html>
și<html>
: Acestea sunt declarații standard de document HTML care specifică că acesta este un document HTML5.<head>
: Această secțiune este de obicei folosită pentru a include metadate despre document, cum ar fi titlul paginii web, care este setat folosind<title>
element.<title>
: Aceasta setează titlul paginii web la „Data prepopulării cu JavaScript”.<body>
: Aceasta este zona principală de conținut a paginii web în care plasați conținutul vizibil și elementele interfeței cu utilizatorul.<form>
: un element de formular care poate conține câmpuri de intrare. În acest caz, este folosit pentru a conține câmpul de intrare ascuns care va fi populat cu data de astăzi.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Acesta este un câmp de intrare ascuns. Nu apare pe pagină, dar poate stoca date. I se dă un ID „hiddenDateField” și un nume „hiddenDateField” pentru identificare și utilizare în JavaScript.<script>
: Aceasta este eticheta de deschidere pentru un bloc de script JavaScript, unde puteți scrie cod JavaScript.function getFormattedDate() { ... }
: Aceasta definește o funcție JavaScript numităgetFormattedDate()
. În cadrul acestei funcții:- Ea creează un nou
Date
obiect reprezentând data și ora curente folosindconst today = new Date();
. - Formatează data într-un șir cu formatul dorit (ll/zz/aaaa) folosind
today.toLocaleDateString()
.'en-US'
argument specifică localul (engleza americană) pentru formatare și obiectul cuyear
,month
, șiday
proprietăți definește formatul datei.
- Ea creează un nou
return formattedDate;
: Această linie returnează data formatată ca șir.document.getElementById('hiddenDateField').value = getFormattedDate();
: Această linie de cod:- Utilizeaza
document.getElementById('hiddenDateField')
pentru a selecta câmpul de intrare ascuns cu ID-ul „hiddenDateField”. - Setează
value
proprietatea câmpului de intrare selectat la valoarea returnată degetFormattedDate()
funcţie. Aceasta completează câmpul ascuns cu data de astăzi în formatul specificat.
- Utilizeaza
Rezultatul final este că atunci când pagina se încarcă, câmpul de intrare ascuns cu ID-ul „hiddenDateField” este populat cu data de astăzi în formatul mm/zz/aaaa fără zerouri de început, așa cum se specifică în getFormattedDate()
Funcția.
Cum să prepopulați un câmp de formular cu data de astăzi și 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>
Acest cod HTML și JavaScript demonstrează cum să utilizați jQuery pentru a prepopula un câmp de intrare ascuns cu data de astăzi, formatată ca mm/zz/aaaa, fără zerouri de început. Să o descompunem pas cu pas:
<!DOCTYPE html>
și<html>
: Acestea sunt declarații standard de document HTML care indică faptul că acesta este un document HTML5.<head>
: Această secțiune este folosită pentru a include metadate și resurse pentru pagina web.<title>
: setează titlul paginii web la „Prepopularea dată cu jQuery și obiectul data JavaScript”.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Această linie include biblioteca jQuery prin specificarea sursei acesteia dintr-o rețea de livrare de conținut (CDN). Se asigură că biblioteca jQuery este disponibilă pentru utilizare pe pagina web.<body>
: Aceasta este zona principală de conținut a paginii web în care plasați conținutul vizibil și elementele interfeței cu utilizatorul.<form>
: un element de formular HTML folosit pentru a conține câmpuri de intrare. În acest caz, este folosit pentru a încapsula câmpul de intrare ascuns.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: un câmp de introducere ascuns care nu va fi vizibil pe pagina web. I se atribuie un ID „hiddenDateField” și un nume „hiddenDateField”.<script>
: Aceasta este eticheta de deschidere pentru un bloc de script JavaScript în care puteți scrie cod JavaScript.$(document).ready(function() { ... });
: Acesta este un bloc de cod jQuery. Acesta folosește$(document).ready()
funcția pentru a se asigura că codul conținut rulează după ce pagina s-a încărcat complet. În cadrul acestei funcții:const today = new Date();
creează un nouDate
obiect reprezentând data și ora curente.const formattedDate = today.toLocaleDateString('en-US', { ... });
formatează data într-un șir cu formatul dorit (ll/zz/aaaa) folosindtoLocaleDateString
metodă.
$('#hiddenDateField').val(formattedDate);
selectează câmpul de intrare ascuns cu ID-ul „hiddenDateField” folosind jQuery și își seteazăvalue
la data formatată. Acest lucru prepopulează efectiv câmpul ascuns cu data de astăzi în formatul specificat.
Codul jQuery simplifică procesul de selectare și modificare a câmpului de intrare ascuns în comparație cu JavaScript pur. Când pagina se încarcă, câmpul de introducere ascuns este completat cu data de astăzi în formatul mm/zz/aaaa și nu sunt prezente zerouri la început, așa cum se specifică în formattedDate
variabilă.