Lomakekentän esitäyttö tämän päivän päivämäärällä ja JavaScriptillä tai JQueryllä
Vaikka monet ratkaisut tarjoavat mahdollisuuden tallentaa päivämäärä jokaisen lomakemerkinnän kanssa, toisinaan se ei ole vaihtoehto. Kannustamme asiakkaitamme lisäämään piilotetun kentän sivustoonsa ja välittämään nämä tiedot merkinnän mukana, jotta he voivat seurata, milloin lomakemerkintöjä syötetään. JavaScriptiä käyttämällä tämä on helppoa.
Lomakekentän esitäyttö tämän päivän päivämäärällä ja JavaScriptillä
<!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>
Puretaan toimitettu HTML- ja JavaScript-koodi vaihe vaiheelta:
<!DOCTYPE html>
ja<html>
: Nämä ovat tavallisia HTML-asiakirjamäärityksiä, jotka määrittelevät, että tämä on HTML5-asiakirja.<head>
: Tätä osiota käytetään yleensä sisällyttämään asiakirjan metatiedot, kuten verkkosivun otsikko, joka asetetaan<title>
elementti.<title>
: Tämä asettaa verkkosivun otsikoksi "Päivämäärän esitäyttö JavaScriptillä".<body>
: Tämä on verkkosivun pääsisältöalue, johon sijoitat näkyvän sisällön ja käyttöliittymäelementit.<form>
: Lomakeelementti, joka voi sisältää syöttökenttiä. Tässä tapauksessa sitä käytetään sisältämään piilotetun syöttökentän, joka täytetään tämän päivän päivämäärällä.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Tämä on piilotettu syöttökenttä. Se ei näy sivulla, mutta voi tallentaa tietoja. Sille on annettu tunnus "hiddenDateField" ja nimi "hiddenDateField" tunnistamista ja käyttöä varten JavaScriptissä.<script>
: Tämä on JavaScript-komentosarjalohkon avaustunniste, johon voit kirjoittaa JavaScript-koodia.function getFormattedDate() { ... }
: Tämä määrittää JavaScript-funktion nimeltägetFormattedDate()
. Tämän toiminnon sisällä:- Se luo uuden
Date
objekti, joka edustaa nykyistä päivämäärää ja aikaa käyttäenconst today = new Date();
. - Se muotoilee päivämäärän merkkijonoksi halutussa muodossa (kk/pp/vvvv) käyttämällä
today.toLocaleDateString()
.'en-US'
argumentti määrittää muotoilun alueen (amerikkalainen englanti) ja objektin kanssayear
,month
jaday
ominaisuudet määrittää päivämäärän muodon.
- Se luo uuden
return formattedDate;
: Tämä rivi palauttaa muotoillun päivämäärän merkkijonona.document.getElementById('hiddenDateField').value = getFormattedDate();
: Tämä koodirivi:- käytät
document.getElementById('hiddenDateField')
valitaksesi piilotetun syöttökentän tunnuksella "hiddenDateField". - Asettaa
value
valitun syöttökentän ominaisuuden palauttamaan arvoongetFormattedDate()
toiminto. Tämä täyttää piilotetun kentän tämän päivän päivämäärällä määritetyssä muodossa.
- käytät
Lopputuloksena on, että kun sivu latautuu, piilotettu syöttökenttä, jonka tunnus on "hiddenDateField", täytetään tämän päivän päivämäärällä muodossa kk/pp/vvvv ilman etunollia, kuten getFormattedDate()
toiminto.
Lomakekentän esitäyttö tämän päivän päivämäärällä ja jQuerylla
<!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>
Tämä HTML- ja JavaScript-koodi näyttää, kuinka jQueryn avulla täytetään piilotettu syöttökenttä tämän päivän päivämäärällä, muotoon kk/pp/vvvv ilman etunollia. Jaetaan se vaihe vaiheelta:
<!DOCTYPE html>
ja<html>
: Nämä ovat tavallisia HTML-asiakirjamäärityksiä, jotka osoittavat, että tämä on HTML5-asiakirja.<head>
: Tätä osiota käytetään verkkosivun metatietojen ja resurssien sisällyttämiseen.<title>
: Asettaa verkkosivun otsikoksi "Päivämäärän esitäyttö jQuerylla ja JavaScript-päivämääräobjektilla".<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Tämä rivi sisältää jQuery-kirjaston määrittämällä sen lähteen sisällönjakeluverkosta (CDN). Se varmistaa, että jQuery-kirjasto on käytettävissä verkkosivulla.<body>
: Tämä on verkkosivun pääsisältöalue, johon sijoitat näkyvän sisällön ja käyttöliittymäelementit.<form>
: HTML-lomakeelementti, jota käytetään sisältämään syöttökenttiä. Tässä tapauksessa sitä käytetään piilotetun syöttökentän kapseloimiseen.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Piilotettu syöttökenttä, joka ei näy verkkosivulla. Sille on määritetty tunnus "hiddenDateField" ja nimi "hiddenDateField".<script>
: Tämä on JavaScript-komentosarjalohkon avaustunniste, johon voit kirjoittaa JavaScript-koodia.$(document).ready(function() { ... });
: Tämä on jQuery-koodilohko. Se käyttää$(document).ready()
-toiminto varmistaaksesi, että sisältämä koodi suoritetaan sivun latautumisen jälkeen. Tämän toiminnon sisällä:const today = new Date();
luo uudenDate
nykyistä päivämäärää ja aikaa edustava objekti.const formattedDate = today.toLocaleDateString('en-US', { ... });
muotoilee päivämäärän merkkijonoksi halutussa muodossa (kk/pp/vvvv) käyttämällätoLocaleDateString
menetelmällä.
$('#hiddenDateField').val(formattedDate);
valitsee piilotetun syöttökentän tunnuksella "hiddenDateField" jQuerylla ja asettaa senvalue
muotoiltuun päivämäärään. Tämä käytännössä täyttää piilotetun kentän tämän päivän päivämäärällä määritetyssä muodossa.
jQuery-koodi yksinkertaistaa piilotetun syöttökentän valintaa ja muokkaamista puhtaaseen JavaScriptiin verrattuna. Kun sivu latautuu, piilotettu syöttökenttä täytetään tämän päivän päivämäärällä muodossa kk/pp/vvvv, eikä etunollia ole, kuten formattedDate
muuttuja.