Sut i Ragboblogi Maes Ffurflen Gyda Dyddiad Heddiw a JavaScript neu JQuery
Er bod llawer o atebion yn cynnig y cyfle i storio'r dyddiad gyda phob cofnod ffurflen, mae adegau eraill pan nad yw'n opsiwn. Rydym yn annog ein cleientiaid i ychwanegu maes cudd i'w gwefan a phasio'r wybodaeth hon ynghyd â'r cofnod fel y gallant olrhain pryd mae cofnodion ffurflen yn cael eu nodi. Gan ddefnyddio JavaScript, mae hyn yn hawdd.
Sut i Ragboblogi Maes Ffurflen Gyda Dyddiad Heddiw a 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>
Gadewch i ni ddadansoddi'r cod HTML a JavaScript a ddarperir gam wrth gam:
<!DOCTYPE html>
a<html>
: Mae'r rhain yn ddatganiadau dogfen HTML safonol sy'n nodi mai dogfen HTML5 yw hon.<head>
: Defnyddir yr adran hon fel arfer i gynnwys metadata am y ddogfen, megis teitl y dudalen we, a osodir gan ddefnyddio'r<title>
elfen.<title>
: Mae hwn yn gosod teitl y dudalen we i “Date Prepopulation with JavaScript.”<body>
: Dyma brif faes cynnwys y dudalen we lle rydych chi'n gosod y cynnwys gweladwy a'r elfennau rhyngwyneb defnyddiwr.<form>
: Elfen ffurf sy'n gallu cynnwys meysydd mewnbwn. Yn yr achos hwn, fe'i defnyddir i gynnwys y maes mewnbwn cudd a fydd yn cael ei lenwi â dyddiad heddiw.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Mae hwn yn faes mewnbwn cudd. Nid yw'n ymddangos ar y dudalen ond gall storio data. Mae wedi cael ID o “hiddenDateField” ac enw “hiddenDateField” i'w adnabod a'i ddefnyddio yn JavaScript.<script>
: Dyma'r tag agoriadol ar gyfer bloc sgript JavaScript, lle gallwch chi ysgrifennu cod JavaScript.function getFormattedDate() { ... }
: Mae hwn yn diffinio swyddogaeth JavaScript o'r enwgetFormattedDate()
. Y tu mewn i'r swyddogaeth hon:- Mae'n creu newydd
Date
gwrthrych yn cynrychioli'r dyddiad a'r amser cyfredol gan ddefnyddioconst today = new Date();
. - Mae'n fformatio'r dyddiad yn llinyn gyda'r fformat dymunol (mm/dd/bbbb) yn ei ddefnyddio
today.toLocaleDateString()
. Mae'en-US'
dadl yn pennu'r locale (Saesneg Americanaidd) ar gyfer fformatio, a'r gwrthrych gydayear
,month
, aday
eiddo sy'n diffinio fformat y dyddiad.
- Mae'n creu newydd
return formattedDate;
: Mae'r llinell hon yn dychwelyd y dyddiad fformatio fel llinyn.document.getElementById('hiddenDateField').value = getFormattedDate();
: Y llinell hon o god:- Yn defnyddio
document.getElementById('hiddenDateField')
i ddewis y maes mewnbwn cudd gyda'r ID “hiddenDateField.” - Yn gosod y
value
eiddo'r maes mewnbwn a ddewiswyd i'r gwerth a ddychwelwyd gan ygetFormattedDate()
swyddogaeth. Mae hyn yn llenwi'r maes cudd gyda dyddiad heddiw yn y fformat penodedig.
- Yn defnyddio
Y canlyniad terfynol yw pan fydd y dudalen yn llwytho, mae'r maes mewnbwn cudd gydag ID “hiddenDateField” wedi'i lenwi â dyddiad heddiw yn y fformat mm/dd/bbbb heb sero arweiniol, fel y nodir yn y getFormattedDate()
swyddogaeth.
Sut i Ragboblogi Maes Ffurflen Gyda Dyddiad Heddiw 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>
Mae'r cod HTML a JavaScript hwn yn dangos sut i ddefnyddio jQuery i ragboblogi maes mewnbwn cudd gyda dyddiad heddiw, wedi'i fformatio fel mm/dd/bbbb, heb sero arweiniol. Gadewch i ni ei dorri i lawr gam wrth gam:
<!DOCTYPE html>
a<html>
: Mae'r rhain yn ddatganiadau dogfen HTML safonol sy'n nodi mai dogfen HTML5 yw hon.<head>
: Defnyddir yr adran hon ar gyfer cynnwys metadata ac adnoddau ar gyfer y dudalen we.<title>
: Yn gosod teitl y dudalen we i “Date Prepopulation gyda jQuery a JavaScript Date Object.”<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Mae'r llinell hon yn cynnwys y llyfrgell jQuery trwy nodi ei ffynhonnell o rwydwaith darparu cynnwys (CDN). Mae'n sicrhau bod y llyfrgell jQuery ar gael i'w defnyddio ar y dudalen we.<body>
: Dyma brif faes cynnwys y dudalen we lle rydych chi'n gosod y cynnwys gweladwy a'r elfennau rhyngwyneb defnyddiwr.<form>
: Elfen ffurf HTML a ddefnyddir i gynnwys meysydd mewnbwn. Yn yr achos hwn, fe'i defnyddir i grynhoi'r maes mewnbwn cudd.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Maes mewnbwn cudd na fydd yn weladwy ar y dudalen we. Mae ganddo ID o “hiddenDateField” ac enw “hiddenDateField.”<script>
: Dyma'r tag agoriadol ar gyfer bloc sgript JavaScript lle gallwch chi ysgrifennu cod JavaScript.$(document).ready(function() { ... });
: Mae hwn yn floc cod jQuery. Mae'n defnyddio'r$(document).ready()
swyddogaeth i sicrhau bod y cod a gynhwysir yn rhedeg ar ôl i'r dudalen lwytho'n llawn. Y tu mewn i'r swyddogaeth hon:const today = new Date();
yn creu newyddDate
gwrthrych yn cynrychioli'r dyddiad a'r amser cyfredol.const formattedDate = today.toLocaleDateString('en-US', { ... });
fformatio'r dyddiad yn llinyn gyda'r fformat dymunol (mm/dd/bbbb) gan ddefnyddio'rtoLocaleDateString
dull.
$('#hiddenDateField').val(formattedDate);
yn dewis y maes mewnbwn cudd gyda'r ID “hiddenDateField” gan ddefnyddio jQuery ac yn gosod eivalue
i'r dyddiad wedi'i fformatio. Mae hyn i bob pwrpas yn rhagboblogi'r maes cudd gyda dyddiad heddiw yn y fformat penodedig.
Mae'r cod jQuery yn symleiddio'r broses o ddewis ac addasu'r maes mewnbwn cudd o'i gymharu â JavaScript pur. Pan fydd y dudalen yn llwytho, mae'r maes mewnbwn cudd yn cael ei boblogi gyda dyddiad heddiw yn y fformat mm/dd/bbbb, ac nid oes sero arweiniol yn bresennol, fel y nodir yn y formattedDate
amrywiol.