Cara Mengisi Medan Borang Dengan Tarikh Hari Ini dan JavaScript atau JQuery
Walaupun banyak penyelesaian menawarkan peluang untuk menyimpan tarikh dengan setiap entri borang, ada masa lain apabila ia bukan pilihan. Kami menggalakkan pelanggan kami menambah medan tersembunyi pada tapak mereka dan menghantar maklumat ini bersama-sama dengan entri supaya mereka boleh menjejaki apabila entri borang dimasukkan. Menggunakan JavaScript, ini adalah mudah.
Cara Mengisi Medan Borang Dengan Tarikh dan JavaScript Hari Ini
<!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 pecahkan kod HTML dan JavaScript yang disediakan langkah demi langkah:
<!DOCTYPE html>
and<html>
: Ini adalah pengisytiharan dokumen HTML standard yang menyatakan bahawa ini ialah dokumen HTML5.<head>
: Bahagian ini biasanya digunakan untuk memasukkan metadata tentang dokumen, seperti tajuk halaman web, yang ditetapkan menggunakan<title>
elemen.<title>
: Ini menetapkan tajuk halaman web kepada "Prapopulasi Tarikh dengan JavaScript."<body>
: Ini ialah kawasan kandungan utama halaman web di mana anda meletakkan kandungan yang boleh dilihat dan elemen antara muka pengguna.<form>
: Elemen bentuk yang boleh mengandungi medan input. Dalam kes ini, ia digunakan untuk mengandungi medan input tersembunyi yang akan diisi dengan tarikh hari ini.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ini adalah medan input tersembunyi. Ia tidak muncul pada halaman tetapi boleh menyimpan data. Ia diberikan ID "hiddenDateField" dan nama "hiddenDateField" untuk pengenalpastian dan penggunaan dalam JavaScript.<script>
: Ini ialah teg pembukaan untuk blok skrip JavaScript, tempat anda boleh menulis kod JavaScript.function getFormattedDate() { ... }
: Ini mentakrifkan fungsi JavaScript yang dipanggilgetFormattedDate()
. Di dalam fungsi ini:- Ia mencipta yang baru
Date
objek yang mewakili tarikh dan masa semasa menggunakanconst today = new Date();
. - Ia memformat tarikh menjadi rentetan dengan menggunakan format yang dikehendaki (mm/dd/yyyy).
today.toLocaleDateString()
. Yang'en-US'
argumen menentukan tempat (Inggeris Amerika) untuk pemformatan, dan objek denganyear
,month
, danday
sifat mentakrifkan format tarikh.
- Ia mencipta yang baru
return formattedDate;
: Baris ini mengembalikan tarikh yang diformat sebagai rentetan.document.getElementById('hiddenDateField').value = getFormattedDate();
: Baris kod ini:- kegunaan
document.getElementById('hiddenDateField')
untuk memilih medan input tersembunyi dengan ID "hiddenDateField." - Menetapkan
value
harta medan input yang dipilih kepada nilai yang dikembalikan olehgetFormattedDate()
fungsi. Ini mengisi medan tersembunyi dengan tarikh hari ini dalam format yang ditentukan.
- kegunaan
Hasil akhirnya ialah apabila halaman dimuatkan, medan input tersembunyi dengan ID "hiddenDateField" diisi dengan tarikh hari ini dalam format mm/dd/yyyy tanpa sifar pendahuluan, seperti yang dinyatakan dalam getFormattedDate()
fungsi.
Bagaimana Untuk Mengisi Medan Borang Dengan Tarikh dan jQuery Hari Ini
<!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>
Kod HTML dan JavaScript ini menunjukkan cara menggunakan jQuery untuk mengisi semula medan input tersembunyi dengan tarikh hari ini, diformatkan sebagai mm/dd/yyyy, tanpa sifar pendahuluan. Mari kita pecahkan langkah demi langkah:
<!DOCTYPE html>
and<html>
: Ini adalah pengisytiharan dokumen HTML standard yang menunjukkan bahawa ini ialah dokumen HTML5.<head>
: Bahagian ini digunakan untuk memasukkan metadata dan sumber untuk halaman web.<title>
: Tetapkan tajuk halaman web kepada "Prapopulasi Tarikh dengan Objek Tarikh jQuery dan JavaScript."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Baris ini termasuk perpustakaan jQuery dengan menyatakan sumbernya daripada rangkaian penghantaran kandungan (CDN). Ia memastikan bahawa perpustakaan jQuery tersedia untuk digunakan pada halaman web.<body>
: Ini ialah kawasan kandungan utama halaman web di mana anda meletakkan kandungan yang boleh dilihat dan elemen antara muka pengguna.<form>
: Elemen bentuk HTML yang digunakan untuk mengandungi medan input. Dalam kes ini, ia digunakan untuk merangkum medan input tersembunyi.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Medan input tersembunyi yang tidak akan kelihatan pada halaman web. Ia diberikan ID "hiddenDateField" dan nama "hiddenDateField."<script>
: Ini ialah teg pembukaan untuk blok skrip JavaScript di mana anda boleh menulis kod JavaScript.$(document).ready(function() { ... });
: Ini ialah blok kod jQuery. Ia menggunakan$(document).ready()
berfungsi untuk memastikan kod yang terkandung berjalan selepas halaman dimuatkan sepenuhnya. Di dalam fungsi ini:const today = new Date();
mencipta yang baruDate
objek yang mewakili tarikh dan masa semasa.const formattedDate = today.toLocaleDateString('en-US', { ... });
memformat tarikh menjadi rentetan dengan format yang dikehendaki (mm/dd/yyyy) menggunakantoLocaleDateString
kaedah.
$('#hiddenDateField').val(formattedDate);
memilih medan input tersembunyi dengan ID "hiddenDateField" menggunakan jQuery dan menetapkannyavalue
kepada tarikh yang diformatkan. Ini dengan berkesan mengisi semula medan tersembunyi dengan tarikh hari ini dalam format yang ditentukan.
Kod jQuery memudahkan proses memilih dan mengubah suai medan input tersembunyi berbanding JavaScript tulen. Apabila halaman dimuatkan, medan input tersembunyi diisi dengan tarikh hari ini dalam format mm/dd/yyyy dan tiada sifar pendahuluan hadir, seperti yang dinyatakan dalam formattedDate
berubah-ubah.