Cara Mengisi Bidang Formulir dengan Tanggal Hari Ini dan JavaScript atau JQuery
Meskipun banyak solusi menawarkan kesempatan untuk menyimpan tanggal pada setiap entri formulir, ada kalanya hal tersebut bukan merupakan pilihan. Kami mendorong klien kami untuk menambahkan bidang tersembunyi ke situs mereka dan meneruskan informasi ini bersama dengan entri sehingga mereka dapat melacak kapan entri formulir dimasukkan. Menggunakan JavaScript, ini mudah.
Cara Mengisi Bidang Formulir dengan Tanggal Hari Ini dan 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>
Mari kita uraikan kode HTML dan JavaScript yang disediakan langkah demi langkah:
<!DOCTYPE html>
dan<html>
: Ini adalah deklarasi dokumen HTML standar yang menetapkan bahwa ini adalah dokumen HTML5.<head>
: Bagian ini biasanya digunakan untuk memasukkan metadata tentang dokumen, seperti judul halaman web, yang diatur menggunakan<title>
elemen.<title>
: Ini menetapkan judul halaman web menjadi “Prapopulasi Tanggal dengan JavaScript.”<body>
: Ini adalah area konten utama halaman web tempat Anda menempatkan konten yang terlihat dan elemen antarmuka pengguna.<form>
: Elemen formulir yang dapat berisi kolom input. Dalam hal ini, ini digunakan untuk memuat kolom masukan tersembunyi yang akan diisi dengan tanggal hari ini.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ini adalah kolom masukan tersembunyi. Itu tidak muncul di halaman tetapi dapat menyimpan data. Itu diberi ID "hiddenDateField" dan nama "hiddenDateField" untuk identifikasi dan penggunaan dalam JavaScript.<script>
: Ini adalah tag pembuka untuk blok skrip JavaScript, tempat Anda dapat menulis kode JavaScript.function getFormattedDate() { ... }
: Ini mendefinisikan fungsi JavaScript yang disebutgetFormattedDate()
. Di dalam fungsi ini:- Ini menciptakan hal baru
Date
objek yang mewakili tanggal dan waktu saat ini menggunakanconst today = new Date();
. - Ini memformat tanggal menjadi string dengan format yang diinginkan (bb/dd/yyyy) menggunakan
today.toLocaleDateString()
. itu'en-US'
argumen menentukan lokal (Bahasa Inggris Amerika) untuk pemformatan, dan objek denganyear
,month
, danday
properti mendefinisikan format tanggal.
- Ini menciptakan hal baru
return formattedDate;
: Baris ini mengembalikan tanggal yang diformat sebagai string.document.getElementById('hiddenDateField').value = getFormattedDate();
: Baris kode ini:- penggunaan
document.getElementById('hiddenDateField')
untuk memilih kolom input tersembunyi dengan ID “hiddenDateField.” - Setel
value
properti bidang masukan yang dipilih dengan nilai yang dikembalikan olehgetFormattedDate()
fungsi. Ini mengisi bidang tersembunyi dengan tanggal hari ini dalam format yang ditentukan.
- penggunaan
Hasil akhirnya adalah ketika halaman dimuat, kolom input tersembunyi dengan ID “hiddenDateField” diisi dengan tanggal hari ini dalam format bb/dd/yyyy tanpa awalan nol, seperti yang ditentukan dalam getFormattedDate()
fungsi.
Cara Mengisi Bidang Formulir dengan Tanggal Hari Ini dan 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 dan JavaScript ini menunjukkan cara menggunakan jQuery untuk mengisi kolom input tersembunyi dengan tanggal hari ini, dengan format bb/dd/yyyy, tanpa awalan nol. Mari kita uraikan langkah demi langkah:
<!DOCTYPE html>
dan<html>
: Ini adalah deklarasi dokumen HTML standar yang menunjukkan bahwa ini adalah dokumen HTML5.<head>
: Bagian ini digunakan untuk memasukkan metadata dan sumber daya untuk halaman web.<title>
: Menyetel judul halaman web menjadi “Prapopulasi Tanggal dengan jQuery dan Objek Tanggal JavaScript.”<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Baris ini menyertakan perpustakaan jQuery dengan menentukan sumbernya dari jaringan pengiriman konten (CDN). Ini memastikan bahwa perpustakaan jQuery tersedia untuk digunakan di halaman web.<body>
: Ini adalah area konten utama halaman web tempat Anda menempatkan konten yang terlihat dan elemen antarmuka pengguna.<form>
: Elemen formulir HTML yang digunakan untuk memuat kolom input. Dalam hal ini, ini digunakan untuk merangkum kolom masukan yang tersembunyi.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Bidang masukan tersembunyi yang tidak akan terlihat di halaman web. Ini diberi ID “hiddenDateField” dan nama “hiddenDateField.”<script>
: Ini adalah tag pembuka untuk blok skrip JavaScript tempat Anda dapat menulis kode JavaScript.$(document).ready(function() { ... });
: Ini adalah blok kode jQuery. Ini menggunakan$(document).ready()
berfungsi untuk memastikan bahwa kode yang ada di dalamnya berjalan setelah halaman dimuat sepenuhnya. Di dalam fungsi ini:const today = new Date();
menciptakan yang baruDate
objek yang mewakili tanggal dan waktu saat ini.const formattedDate = today.toLocaleDateString('en-US', { ... });
memformat tanggal menjadi string dengan format yang diinginkan (bb/dd/yyyy) menggunakantoLocaleDateString
Metode.
$('#hiddenDateField').val(formattedDate);
memilih kolom input tersembunyi dengan ID "hiddenDateField" menggunakan jQuery dan menyetelnyavalue
ke tanggal yang diformat. Ini secara efektif mengisi bidang tersembunyi dengan tanggal hari ini dalam format yang ditentukan.
Kode jQuery menyederhanakan proses memilih dan memodifikasi kolom input tersembunyi dibandingkan dengan JavaScript murni. Saat halaman dimuat, kolom masukan tersembunyi diisi dengan tanggal hari ini dalam format bb/hh/tttt, dan tidak ada angka nol di depan, seperti yang ditentukan dalam formattedDate
variabel.