Hvernig á að forfylla formreit með dagsetningu dagsins og JavaScript eða JQuery
Þó að margar lausnir bjóða upp á tækifæri til að geyma dagsetninguna með hverri eyðublaðsfærslu, þá eru aðrir tímar þar sem það er ekki valkostur. Við hvetjum viðskiptavini okkar til að bæta við földum reit á síðuna sína og senda þessar upplýsingar ásamt færslunni svo þeir geti fylgst með því hvenær eyðublaðsfærslur eru færðar inn. Með því að nota JavaScript er þetta auðvelt.
Hvernig á að forútfylla eyðublaðsreit með dagsetningu dagsins og 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>
Við skulum sundurliða HTML og JavaScript kóðann sem fylgir skref fyrir skref:
<!DOCTYPE html>
og<html>
: Þetta eru staðlaðar HTML skjalayfirlýsingar sem tilgreina að þetta sé HTML5 skjal.<head>
: Þessi hluti er venjulega notaður til að innihalda lýsigögn um skjalið, eins og titil vefsíðunnar, sem er stillt með<title>
frumefni.<title>
: Þetta stillir titil vefsíðunnar á „Forútfylling dagsetningar með JavaScript.“<body>
: Þetta er aðalefnissvæði vefsíðunnar þar sem þú setur sýnilegt efni og notendaviðmótsþætti.<form>
: Formþáttur sem getur innihaldið innsláttarreiti. Í þessu tilfelli er það notað til að innihalda falinn innsláttarreit sem verður fylltur út með dagsetningu dagsins.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Þetta er falinn innsláttarreitur. Það birtist ekki á síðunni en getur geymt gögn. Það er gefið auðkenni „hiddenDateField“ og nafn „hiddenDateField“ til auðkenningar og notkunar í JavaScript.<script>
: Þetta er upphafsmerkið fyrir JavaScript forskriftarblokk, þar sem þú getur skrifað JavaScript kóða.function getFormattedDate() { ... }
: Þetta skilgreinir JavaScript fall sem kallastgetFormattedDate()
. Inni í þessari aðgerð:- Það skapar nýtt
Date
hlutur sem táknar núverandi dagsetningu og tíma með því að notaconst today = new Date();
. - Það sniður dagsetninguna í streng með æskilegu sniði (mm/dd/áááá) með því að nota
today.toLocaleDateString()
. Í'en-US'
argument tilgreinir staðsetning (amerísk enska) fyrir snið og hlutinn meðyear
,month
ogday
eiginleikar skilgreina dagsetningarsniðið.
- Það skapar nýtt
return formattedDate;
: Þessi lína skilar sniðinni dagsetningu sem streng.document.getElementById('hiddenDateField').value = getFormattedDate();
: Þessi kóðalína:- Notar
document.getElementById('hiddenDateField')
til að velja falinn innsláttarreit með auðkenninu „hiddenDateField“. - Stillir
value
eiginleiki valins inntaksreits í gildið sem skilað er afgetFormattedDate()
virka. Þetta fyllir út falinn reit með dagsetningu dagsins á tilgreindu sniði.
- Notar
Lokaniðurstaðan er sú að þegar síðan hleðst er fali innsláttarreiturinn með auðkenninu „hiddenDateField“ fylltur út dagsetningu dagsins á sniðinu mm/dd/áááá án upphafsnúlla, eins og tilgreint er í getFormattedDate()
virka.
Hvernig á að forútfylla eyðublaðsreit með dagsetningu dagsins og 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>
Þessi HTML og JavaScript kóði sýnir hvernig á að nota jQuery til að forfylla falinn innsláttarreit með dagsetningu dagsins, sniðinn sem mm/dd/áááá, án núlls í fremstu röð. Við skulum brjóta það niður skref fyrir skref:
<!DOCTYPE html>
og<html>
: Þetta eru staðlaðar HTML skjalayfirlýsingar sem gefa til kynna að þetta sé HTML5 skjal.<head>
: Þessi hluti er notaður til að innihalda lýsigögn og tilföng fyrir vefsíðuna.<title>
: Stillir titil vefsíðunnar á "Date Prepopulation with jQuery and JavaScript Date Object."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Þessi lína inniheldur jQuery bókasafnið með því að tilgreina uppruna þess frá efnisafhendingarneti (CDN). Það tryggir að jQuery bókasafnið sé tiltækt til notkunar á vefsíðunni.<body>
: Þetta er aðalefnissvæði vefsíðunnar þar sem þú setur sýnilegt efni og notendaviðmótsþætti.<form>
: HTML eyðublað sem er notað til að innihalda innsláttarreit. Í þessu tilviki er það notað til að umlykja falinn innsláttarreit.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Falinn innsláttarreitur sem verður ekki sýnilegur á vefsíðunni. Það er úthlutað auðkenni „hiddenDateField“ og nafninu „hiddenDateField“.<script>
: Þetta er upphafsmerkið fyrir JavaScript forskriftarblokk þar sem þú getur skrifað JavaScript kóða.$(document).ready(function() { ... });
: Þetta er jQuery kóða blokk. Það notar$(document).ready()
aðgerð til að tryggja að kóðinn sem er að finna keyrir eftir að síðan hefur verið fullhlaðinn. Inni í þessari aðgerð:const today = new Date();
býr til nýttDate
hlutur sem táknar núverandi dagsetningu og tíma.const formattedDate = today.toLocaleDateString('en-US', { ... });
forsníða dagsetninguna í streng með æskilegu sniði (mm/dd/áááá) með því að notatoLocaleDateString
aðferð.
$('#hiddenDateField').val(formattedDate);
velur falinn innsláttarreit með auðkenninu „hiddenDateField“ með jQuery og stillir þaðvalue
til sniðinnar dagsetningar. Þetta útfyllir í raun falinn reit með dagsetningu í dag á tilgreindu sniði.
jQuery kóðinn einfaldar ferlið við að velja og breyta falda innsláttarreitnum samanborið við hreint JavaScript. Þegar síðan hleðst er fali innsláttarreiturinn fylltur út dagsetningu dagsins á sniðinu mm/dd/áááá og engin núll í fremstu röð, eins og tilgreint er í formattedDate
breyta.