Jinsi ya Kujaza Sehemu ya Fomu na Tarehe ya Leo na JavaScript au JQuery
Ingawa suluhisho nyingi hutoa fursa ya kuhifadhi tarehe na kila ingizo la fomu, kuna nyakati zingine ambapo sio chaguo. Tunawahimiza wateja wetu kuongeza sehemu iliyofichwa kwenye tovuti yao na kupitisha maelezo haya pamoja na ingizo ili waweze kufuatilia maingizo ya fomu yanapoingizwa. Kwa kutumia JavaScript, hii ni rahisi.
Jinsi ya Kujaza Sehemu ya Fomu na Tarehe ya Leo na 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>
Wacha tuchambue nambari ya HTML na JavaScript iliyotolewa hatua kwa hatua:
<!DOCTYPE html>
na<html>
: Haya ni matamko ya kawaida ya hati ya HTML yanayobainisha kuwa hii ni hati ya HTML5.<head>
: Sehemu hii kwa kawaida hutumiwa kujumuisha metadata kuhusu hati, kama vile kichwa cha ukurasa wa tovuti, ambacho huwekwa kwa kutumia<title>
kipengee.<title>
: Hii inaweka kichwa cha ukurasa wa tovuti kuwa "Tarehe Prepopulation with JavaScript."<body>
: Hili ndilo eneo kuu la maudhui ya ukurasa wa tovuti ambapo unaweka maudhui yanayoonekana na vipengele vya kiolesura cha mtumiaji.<form>
: Kipengele cha fomu ambacho kinaweza kuwa na sehemu za ingizo. Katika hali hii, inatumika kuwa na uga fiche wa ingizo ambao utajazwa na tarehe ya leo.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Hii ni sehemu iliyofichwa ya ingizo. Haionekani kwenye ukurasa lakini inaweza kuhifadhi data. Imepewa kitambulisho cha "hiddenDateField" na jina la "hiddenDateField" kwa ajili ya kitambulisho na matumizi katika JavaScript.<script>
: Hii ni tagi ya ufunguzi wa kizuizi cha hati ya JavaScript, ambapo unaweza kuandika msimbo wa JavaScript.function getFormattedDate() { ... }
: Hii inafafanua kazi ya JavaScript inayoitwagetFormattedDate()
. Ndani ya kipengele hiki:- Inaunda mpya
Date
kitu kinachowakilisha tarehe na wakati wa sasa wa kutumiaconst today = new Date();
. - Inapanga tarehe kuwa mfuatano na umbizo linalotakikana (mm/dd/yyyy) kwa kutumia
today.toLocaleDateString()
. The'en-US'
hoja inabainisha eneo (Kiingereza cha Kimarekani) cha umbizo, na kitu nayear
,month
, naday
sifa hufafanua muundo wa tarehe.
- Inaunda mpya
return formattedDate;
: Mstari huu unarudisha tarehe iliyoumbizwa kama mfuatano.document.getElementById('hiddenDateField').value = getFormattedDate();
: Mstari huu wa kanuni:- matumizi
document.getElementById('hiddenDateField')
ili kuchagua sehemu ya ingizo iliyofichwa na kitambulisho "hiddenDateField." - Inaweka
value
mali ya sehemu iliyochaguliwa ya ingizo kwa thamani iliyorejeshwa nagetFormattedDate()
kazi. Hii inajaza sehemu iliyofichwa kwa tarehe ya leo katika umbizo maalum.
- matumizi
Matokeo ya mwisho ni kwamba ukurasa unapopakia, sehemu iliyofichwa ya ingizo yenye kitambulisho “hiddenDateField” inajazwa na tarehe ya leo katika umbizo mm/dd/yyyy bila sufuri zinazotangulia, kama ilivyobainishwa katika getFormattedDate()
kazi.
Jinsi ya Kujaza Sehemu ya Fomu Na Tarehe ya Leo na 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>
Msimbo huu wa HTML na JavaScript unaonyesha jinsi ya kutumia jQuery kujaza sehemu ya ingizo iliyofichwa na tarehe ya leo, iliyoumbizwa kama mm/dd/yyyy, bila sufuri nyingi. Wacha tuichambue hatua kwa hatua:
<!DOCTYPE html>
na<html>
: Haya ni matamko ya kawaida ya hati ya HTML yanayoonyesha kuwa hii ni hati ya HTML5.<head>
: Sehemu hii inatumika kujumuisha metadata na nyenzo za ukurasa wa tovuti.<title>
: Huweka kichwa cha ukurasa wa tovuti kuwa "Tarehe Prepopulation with jQuery na JavaScript Date Object."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Laini hii inajumuisha maktaba ya jQuery kwa kubainisha chanzo chake kutoka kwa mtandao wa utoaji maudhui (CDN). Inahakikisha kwamba maktaba ya jQuery inapatikana kwa matumizi kwenye ukurasa wa tovuti.<body>
: Hili ndilo eneo kuu la maudhui ya ukurasa wa tovuti ambapo unaweka maudhui yanayoonekana na vipengele vya kiolesura cha mtumiaji.<form>
: Kipengele cha fomu ya HTML kinachotumika kujumuisha sehemu za ingizo. Katika kesi hii, inatumika kujumuisha sehemu iliyofichwa ya ingizo.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Sehemu iliyofichwa ya ingizo ambayo haitaonekana kwenye ukurasa wa wavuti. Imekabidhiwa kitambulisho cha “hiddenDateField” na jina la “hiddenDateField.”<script>
: Hii ni tagi ya ufunguzi wa kizuizi cha hati ya JavaScript ambapo unaweza kuandika msimbo wa JavaScript.$(document).ready(function() { ... });
: Hiki ni kizuizi cha msimbo wa jQuery. Inatumia$(document).ready()
kazi ili kuhakikisha kwamba msimbo uliomo unafanya kazi baada ya ukurasa kupakiwa kikamilifu. Ndani ya kipengele hiki:const today = new Date();
huunda mpyaDate
kitu kinachowakilisha tarehe na wakati wa sasa.const formattedDate = today.toLocaleDateString('en-US', { ... });
hupanga tarehe kuwa mfuatano na umbizo linalotakikana (mm/dd/yyyy) kwa kutumiatoLocaleDateString
mbinu.
$('#hiddenDateField').val(formattedDate);
huchagua sehemu ya ingizo iliyofichwa na kitambulisho "hiddenDateField" kwa kutumia jQuery na kuweka yakevalue
hadi tarehe iliyoumbizwa. Hii inajaza kwa ufanisi sehemu iliyofichwa na tarehe ya leo katika umbizo maalum.
Nambari ya jQuery hurahisisha mchakato wa kuchagua na kurekebisha sehemu iliyofichwa ya ingizo ikilinganishwa na JavaScript safi. Wakati ukurasa unapopakia, sehemu iliyofichwa ya ingizo hujazwa na tarehe ya leo katika umbizo la mm/dd/yyyy, na hakuna sufuri zinazoongoza, kama ilivyobainishwa katika formattedDate
kutofautiana.