Bii o ṣe le ṣaju aaye Fọọmu kan Pẹlu Ọjọ Oni ati JavaScript tabi JQuery
Lakoko ti ọpọlọpọ awọn solusan nfunni ni aye lati tọju ọjọ naa pẹlu titẹsi fọọmu kọọkan, awọn igba miiran wa nigbati kii ṣe aṣayan. A gba awọn alabara wa niyanju lati ṣafikun aaye ti o farapamọ si aaye wọn ki o kọja alaye yii pẹlu titẹ sii ki wọn le tọpa nigbati awọn titẹ sii fọọmu ba wa. Lilo JavaScript, eyi rọrun.
Bii o ṣe le ṣaju aaye Fọọmu kan Pẹlu Ọjọ Oni ati 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>
Jẹ ki a ya lulẹ HTML ti a pese ati koodu JavaScript ni igbese nipasẹ igbese:
<!DOCTYPE html>
ati<html>
: Iwọnyi jẹ awọn ikede iwe aṣẹ HTML boṣewa ti o sọ pe eyi jẹ iwe HTML5 kan.<head>
: Abala yii ni a maa n lo lati ni awọn metadata nipa iwe-ipamọ naa, gẹgẹbi akọle oju-iwe wẹẹbu, eyiti a ṣeto pẹlu lilo<title>
ano.<title>
: Eyi ṣeto akọle oju-iwe wẹẹbu naa si “Iṣaaju Ọjọ Pelu JavaScript.”<body>
: Eyi ni agbegbe akoonu akọkọ ti oju-iwe wẹẹbu nibiti o gbe akoonu ti o han ati awọn eroja wiwo olumulo.<form>
: Ero fọọmu ti o le ni awọn aaye titẹ sii ninu. Ni idi eyi, o jẹ lilo lati ni aaye titẹ sii ti o farapamọ ti yoo kun pẹlu ọjọ oni.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Eyi jẹ aaye titẹ sii ti o farapamọ. Ko han loju iwe ṣugbọn o le fi data pamọ. O fun ni ID ti “hiddenDateField” ati orukọ kan ti “hiddenDateField” fun idanimọ ati lilo ninu JavaScript.<script>
: Eyi ni aami ṣiṣi fun Àkọsílẹ iwe afọwọkọ JavaScript, nibi ti o ti le kọ koodu JavaScript.function getFormattedDate() { ... }
: Eleyi asọye a JavaScript iṣẹ ti a npe nigetFormattedDate()
. Ninu iṣẹ yii:- O ṣẹda titun kan
Date
nkan ti o nsoju ọjọ ati akoko lọwọlọwọ nipa liloconst today = new Date();
. - O ṣe ọna kika ọjọ sinu okun pẹlu ọna kika ti o fẹ (mm/dd/yyyy) ni lilo
today.toLocaleDateString()
. awọn'en-US'
ariyanjiyan pato agbegbe (American English) fun kika, ati ohun ti o wa pẹluyear
,month
, Atiday
-ini asọye ọna kika ọjọ.
- O ṣẹda titun kan
return formattedDate;
: Laini yii da ọjọ ti a pa akoonu pada bi okun.document.getElementById('hiddenDateField').value = getFormattedDate();
: Laini koodu yii:- ipawo
document.getElementById('hiddenDateField')
lati yan aaye titẹ sii ti o farapamọ pẹlu ID “hiddenDateField.” - Ṣeto awọn
value
ohun ini ti awọn ti o yan input aaye si iye pada nipa awọngetFormattedDate()
iṣẹ. Eyi ṣe agbejade aaye ti o farapamọ pẹlu ọjọ oni ni ọna kika ti a sọ.
- ipawo
Abajade ipari ni pe nigbati oju-iwe naa ba ṣaja, aaye titẹ sii ti o farapamọ pẹlu ID “hiddenDateField” ti kun pẹlu ọjọ oni ni ọna kika mm/dd/yyyy laisi awọn odo asiwaju, bi pato ninu getFormattedDate()
iṣẹ.
Bii o ṣe le ṣaju aaye Fọọmu kan Pẹlu Ọjọ Oni ati 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>
HTML yii ati koodu JavaScript ṣe afihan bi o ṣe le lo jQuery lati ṣaju aaye titẹ sii ti o farapamọ pẹlu ọjọ oni, ti a ṣe pa akoonu bi mm/dd/yyyy, laisi awọn odo asiwaju. Jẹ ki a ya lulẹ ni igbese nipa igbese:
<!DOCTYPE html>
ati<html>
: Iwọnyi jẹ awọn ikede iwe aṣẹ HTML boṣewa ti o tọka pe eyi jẹ iwe HTML5.<head>
: Abala yii jẹ lilo fun pẹlu metadata ati awọn orisun fun oju opo wẹẹbu naa.<title>
: Ṣeto akọle oju-iwe wẹẹbu naa si “Iwaju ọjọ pẹlu jQuery ati Ohun Ọjọ JavaScript.”<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Laini yii pẹlu ile-ikawe jQuery nipa sisọ orisun rẹ lati inu nẹtiwọọki ifijiṣẹ akoonu (CDN). O ṣe idaniloju pe ile-ikawe jQuery wa fun lilo lori oju opo wẹẹbu naa.<body>
: Eyi ni agbegbe akoonu akọkọ ti oju-iwe wẹẹbu nibiti o gbe akoonu ti o han ati awọn eroja wiwo olumulo.<form>
: Ohun elo fọọmu HTML ti a lo lati ni awọn aaye titẹ sii ninu. Ni idi eyi, o ti lo lati ṣafikun aaye titẹ sii ti o farapamọ.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Aaye titẹ sii ti o farapamọ ti kii yoo han loju oju opo wẹẹbu naa. O ti pin ID kan ti “hiddenDateField” ati orukọ kan ti “HiddenDateField.”<script>
: Eyi ni aami ṣiṣi fun iwe afọwọkọ JavaScript nibiti o ti le kọ koodu JavaScript.$(document).ready(function() { ... });
: Eleyi jẹ jQuery koodu Àkọsílẹ. O nlo awọn$(document).ready()
iṣẹ lati rii daju wipe awọn ti o wa ninu koodu nṣiṣẹ lẹhin ti awọn iwe ti ni kikun kojọpọ. Ninu iṣẹ yii:const today = new Date();
ṣẹda titun kanDate
nkan ti o nsoju ọjọ ati akoko lọwọlọwọ.const formattedDate = today.toLocaleDateString('en-US', { ... });
ṣe ọna kika ọjọ sinu okun pẹlu ọna kika ti o fẹ (mm/dd/yyyy) ni lilo awọntoLocaleDateString
ọna.
$('#hiddenDateField').val(formattedDate);
yan aaye titẹ sii ti o farapamọ pẹlu ID “hiddenDateField” ni lilo jQuery ati ṣeto rẹvalue
si awọn kika ọjọ. Eyi ni imunadoko ṣaju aaye ti o farapamọ pẹlu ọjọ oni ni ọna kika ti a sọ.
Koodu jQuery jẹ irọrun ilana ti yiyan ati iyipada aaye titẹ sii ti o farapamọ ni akawe si JavaScript mimọ. Nigbati oju-iwe naa ba gberu, aaye titẹ sii ti o farapamọ ti kun pẹlu ọjọ oni ni ọna kika mm/dd/yyyy, ko si si awọn odo asiwaju ti o wa, bi pato ninu formattedDate
ayípadà.