Cara Prepopulate Bidang Formulir Kanthi Tanggal Saiki lan JavaScript utawa JQuery
Nalika akeh solusi menehi kesempatan kanggo nyimpen tanggal karo saben entri formulir, ana wektu liyane sing ora dadi pilihan. Kita kasurung klien kita kanggo nambah kolom didhelikake kanggo situs lan pass informasi iki bebarengan karo entri supaya padha bisa nglacak nalika formulir entri sing ngetik. Nggunakake JavaScript, iki gampang.
Carane Prepopulate Lapangan Formulir Kanthi Tanggal Dina lan 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>
Ayo dipecah kode HTML lan JavaScript sing diwenehake kanthi langkah:
<!DOCTYPE html>
lan<html>
: Iki minangka deklarasi dokumen HTML standar sing nemtokake manawa iki minangka dokumen HTML5.<head>
: Bagean iki biasane digunakake kanggo nyakup metadata babagan dokumen, kayata judhul kaca web, sing disetel nggunakake<title>
unsur.<title>
: Iki nyetel judhul kaca web dadi "Prepopulasi Tanggal karo JavaScript."<body>
: Iki minangka area isi utama kaca web ing ngendi sampeyan nyelehake konten sing katon lan unsur antarmuka pangguna.<form>
: Unsur wangun sing bisa ngemot kolom input. Ing kasus iki, digunakake kanggo ngemot kolom input sing didhelikake sing bakal diisi karo tanggal saiki.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Iki minangka kolom input sing didhelikake. Ora katon ing kaca nanging bisa nyimpen data. Iki diwenehi ID "hiddenDateField" lan jeneng "hiddenDateField" kanggo identifikasi lan digunakake ing JavaScript.<script>
: Iki minangka tag pambuka kanggo blok skrip JavaScript, ing ngendi sampeyan bisa nulis kode JavaScript.function getFormattedDate() { ... }
: Iki nemtokake fungsi JavaScript disebutgetFormattedDate()
. Ing njero fungsi iki:- Iku nggawe anyar
Date
obyek sing makili tanggal lan wektu saiki nggunakakeconst today = new Date();
. - Format tanggal dadi senar kanthi format sing dikarepake (mm/dd/yyyy) nggunakake
today.toLocaleDateString()
. The'en-US'
argumen nemtokake lokal (American English) kanggo format, lan obyek karoyear
,month
, Landay
properti nemtokake format tanggal.
- Iku nggawe anyar
return formattedDate;
: Baris iki ngasilake tanggal sing diformat minangka senar.document.getElementById('hiddenDateField').value = getFormattedDate();
: Kode baris iki:- ulah
document.getElementById('hiddenDateField')
kanggo milih kolom input sing didhelikake kanthi ID "hiddenDateField." - Mranata ing
value
properti saka kolom input sing dipilih kanggo nilai bali deninggetFormattedDate()
fungsi. Iki ngisi kolom sing didhelikake karo tanggal dina iki ing format sing ditemtokake.
- ulah
Asil pungkasan yaiku nalika kaca dimuat, kolom input sing didhelikake kanthi ID "hiddenDateField" diisi karo tanggal saiki ing format mm/dd/yyyy tanpa nol ngarep, kaya sing kasebut ing getFormattedDate()
fungsi.
Carane Prepopulate Field Formulir Kanthi Tanggal Dina lan 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>
Kode HTML lan JavaScript iki nduduhake carane nggunakake jQuery kanggo prepopulate kolom input didhelikake karo tanggal dina, format minangka mm / dd / yyyy, tanpa nul anjog. Ayo kita break mudhun langkah demi langkah:
<!DOCTYPE html>
lan<html>
: Iki minangka deklarasi dokumen HTML standar sing nuduhake yen iki minangka dokumen HTML5.<head>
: Bagean iki digunakake kanggo nyakup metadata lan sumber daya kanggo kaca web.<title>
: Nyetel judhul kaca web dadi "Prepopulasi Tanggal karo Objek Tanggal jQuery lan JavaScript."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Baris iki kalebu perpustakaan jQuery kanthi nemtokake sumber saka jaringan pangiriman isi (CDN). Mesthekake yen perpustakaan jQuery kasedhiya kanggo digunakake ing kaca web.<body>
: Iki minangka area isi utama kaca web ing ngendi sampeyan nyelehake konten sing katon lan unsur antarmuka pangguna.<form>
: Unsur wangun HTML sing digunakake kanggo ngemot kolom input. Ing kasus iki, digunakake kanggo encapsulate kolom input sing didhelikake.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Kolom input sing didhelikake sing ora katon ing kaca web. Iki diwenehi ID "hiddenDateField" lan jeneng "hiddenDateField."<script>
: Iki minangka tag pambuka kanggo blok skrip JavaScript ing ngendi sampeyan bisa nulis kode JavaScript.$(document).ready(function() { ... });
: Iki minangka blok kode jQuery. Iku nggunakake ing$(document).ready()
fungsi kanggo mesthekake yen kode sing ana mlaku sawise kaca wis kebak dimuat. Ing njero fungsi iki:const today = new Date();
nggawe anyarDate
obyek sing makili tanggal lan wektu saiki.const formattedDate = today.toLocaleDateString('en-US', { ... });
format tanggal dadi string karo format sing dikarepake (mm/dd/yyyy) nggunakaketoLocaleDateString
cara.
$('#hiddenDateField').val(formattedDate);
milih lapangan input didhelikake karo ID "hiddenDateField" nggunakake jQuery lan nyetel sawijiningvalue
menyang tanggal format. Iki èfèktif prepopulates kolom didhelikake karo tanggal dina ing format tartamtu.
Kode jQuery nyederhanakake proses milih lan ngowahi lapangan input sing didhelikake dibandhingake JavaScript murni. Nalika kaca dimuat, kolom input sing didhelikake diisi karo tanggal dina iki ing format mm/dd/yyyy, lan ora ana nol utama, kaya sing kasebut ing formattedDate
variabel.