Kaip iš anksto užpildyti formos lauką naudojant šiandienos datą ir „JavaScript“ arba „JQuery“.
Nors daugelis sprendimų suteikia galimybę išsaugoti datą kiekviename formos įraše, kartais tai nėra parinktis. Raginame savo klientus į savo svetainę įtraukti paslėptą lauką ir perduoti šią informaciją kartu su įrašu, kad jie galėtų stebėti, kada įvedami formos įrašai. Naudojant JavaScript, tai paprasta.
Kaip iš anksto užpildyti formos lauką naudojant šiandienos datą ir „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>
Žingsnis po žingsnio išskaidykime pateiktą HTML ir JavaScript kodą:
<!DOCTYPE html>
ir<html>
: Tai yra standartinės HTML dokumento deklaracijos, nurodančios, kad tai yra HTML5 dokumentas.<head>
: ši skiltis paprastai naudojama metaduomenims apie dokumentą įtraukti, pvz., tinklalapio pavadinimui, kuris nustatomas naudojant<title>
elementas.<title>
: Tai nustato tinklalapio pavadinimą į „Išankstinis datos užpildymas naudojant JavaScript“.<body>
: Tai yra pagrindinė tinklalapio turinio sritis, kurioje pateikiate matomą turinį ir vartotojo sąsajos elementus.<form>
: formos elementas, kuriame gali būti įvesties laukų. Šiuo atveju jame yra paslėptas įvesties laukas, kuris bus užpildytas šios dienos data.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Tai paslėptas įvesties laukas. Jis nerodomas puslapyje, bet gali saugoti duomenis. Jam suteiktas ID „hiddenDateField“ ir pavadinimas „hiddenDateField“, kad būtų galima identifikuoti ir naudoti „JavaScript“.<script>
: Tai yra „JavaScript“ scenarijaus bloko pradžios žyma, kurioje galite rašyti „JavaScript“ kodą.function getFormattedDate() { ... }
: Tai apibrėžia JavaScript funkciją, vadinamągetFormattedDate()
. Šios funkcijos viduje:- Tai sukuria naują
Date
objektas, vaizduojantis dabartinę datą ir laiką naudojantconst today = new Date();
. - Jis suformatuoja datą į eilutę norimu formatu (mm/dd/yyyy).
today.toLocaleDateString()
,'en-US'
argumentas nurodo formatavimo lokalę (amerikiečių anglų k.) ir objektą suyear
,month
, irday
ypatybės apibrėžia datos formatą.
- Tai sukuria naują
return formattedDate;
: ši eilutė grąžina suformatuotą datą kaip eilutę.document.getElementById('hiddenDateField').value = getFormattedDate();
: Ši kodo eilutė:- Naudoja
document.getElementById('hiddenDateField')
norėdami pasirinkti paslėptą įvesties lauką su ID „hiddenDateField“. - Nustato
value
pasirinkto įvesties lauko savybę į vertę, kurią grąžinogetFormattedDate()
funkcija. Taip paslėptas laukas užpildomas šios dienos data nurodytu formatu.
- Naudoja
Galutinis rezultatas yra toks, kad kai puslapis įkeliamas, paslėptas įvesties laukas su ID „hiddenDateField“ užpildomas šios dienos data formatu mm/dd/yyyy be nulių priekyje, kaip nurodyta getFormattedDate()
funkcija.
Kaip iš anksto užpildyti formos lauką naudojant šiandienos datą ir „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>
Šis HTML ir „JavaScript“ kodas parodo, kaip naudoti „jQuery“ paslėptame įvesties lauke iš anksto užpildyti šios dienos data, suformatuota kaip mm/dd/yyyy, be nulių priekyje. Išskaidykime jį žingsnis po žingsnio:
<!DOCTYPE html>
ir<html>
: tai yra standartinės HTML dokumento deklaracijos, nurodančios, kad tai yra HTML5 dokumentas.<head>
: ši skiltis naudojama tinklalapio metaduomenims ir ištekliams įtraukti.<title>
: nustato tinklalapio pavadinimą į „Išankstinis datos užpildymas naudojant „jQuery“ ir „JavaScript“ datos objektą.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Šioje eilutėje yra „jQuery“ biblioteka, nurodant jos šaltinį iš turinio pristatymo tinklo (CDN). Tai užtikrina, kad jQuery biblioteką galima naudoti tinklalapyje.<body>
: Tai yra pagrindinė tinklalapio turinio sritis, kurioje pateikiate matomą turinį ir vartotojo sąsajos elementus.<form>
: HTML formos elementas, naudojamas įvesties laukams laikyti. Šiuo atveju jis naudojamas paslėptam įvesties laukui įterpti.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: paslėptas įvesties laukas, kuris nebus matomas tinklalapyje. Jai priskirtas ID „hiddenDateField“ ir pavadinimas „hiddenDateField“.<script>
: tai yra „JavaScript“ scenarijaus bloko, kuriame galite rašyti „JavaScript“ kodą, pradžios žyma.$(document).ready(function() { ... });
: Tai jQuery kodo blokas. Jis naudoja$(document).ready()
funkcija, užtikrinanti, kad esantis kodas būtų paleistas, kai puslapis bus visiškai įkeltas. Šios funkcijos viduje:const today = new Date();
sukuria naująDate
objektas, vaizduojantis dabartinę datą ir laiką.const formattedDate = today.toLocaleDateString('en-US', { ... });
formatuoja datą į eilutę norimu formatu (mm/dd/yyyy), naudodamatoLocaleDateString
metodas.
$('#hiddenDateField').val(formattedDate);
pasirenka paslėptą įvesties lauką su ID „hiddenDateField“, naudodamas „jQuery“ ir nustato jovalue
iki suformatuotos datos. Tai efektyviai iš anksto užpildo paslėptą lauką šios dienos data nurodytu formatu.
„jQuery“ kodas supaprastina paslėpto įvesties lauko pasirinkimo ir modifikavimo procesą, palyginti su grynu „JavaScript“. Kai puslapis įkeliamas, paslėptas įvesties laukas užpildomas šios dienos data formatu mm/dd/yyyy, o priešakinių nulių nėra, kaip nurodyta formattedDate
kintamasis.