Маягтын талбарыг өнөөдрийн огноо, JavaScript эсвэл JQuery ашиглан хэрхэн урьдчилан бөглөх вэ
Хэдийгээр олон шийдэл нь маягтын оруулга бүрт огноог хадгалах боломжийг санал болгодог ч энэ нь боломжгүй үе байдаг. Бид үйлчлүүлэгчдээ сайтдаа далд талбар нэмж оруулахыг зөвлөж байна, ингэснээр тэд маягтын оруулгуудыг хэзээ оруулахыг хянах боломжтой. JavaScript-г ашигласнаар энэ нь хялбар юм.
Маягтын талбарыг өнөөдрийн огноо болон 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>
Өгөгдсөн HTML болон JavaScript кодыг алхам алхмаар задалъя:
<!DOCTYPE html>
болон<html>
: Эдгээр нь HTML5 баримт бичиг гэдгийг тодорхойлсон стандарт HTML баримтын мэдэгдэл юм.<head>
: Энэ хэсгийг ихэвчлэн вэб хуудасны гарчиг гэх мэт баримт бичгийн мета өгөгдлийг оруулахад ашигладаг.<title>
бүрэлдэхүүн.<title>
: Энэ нь вэб хуудасны гарчгийг "JavaScript ашиглан огноог урьдчилан бэлдэх" гэж тохируулдаг.<body>
: Энэ бол харагдах контент болон хэрэглэгчийн интерфейсийн элементүүдийг байршуулах вэб хуудасны үндсэн агуулгын хэсэг юм.<form>
: Оролтын талбаруудыг агуулж болох маягтын элемент. Энэ тохиолдолд өнөөдрийн огноогоор бөглөх далд оруулах талбарыг агуулна.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Энэ бол далд оруулах талбар юм. Энэ нь хуудсан дээр харагдахгүй боловч өгөгдөл хадгалах боломжтой. Үүнийг JavaScript-д таних, ашиглахын тулд "hiddenDateField" ID болон "hiddenDateField" нэрийг өгсөн.<script>
: Энэ нь JavaScript скрипт блокийн нээлтийн шошго бөгөөд та JavaScript код бичих боломжтой.function getFormattedDate() { ... }
: Энэ нь нэртэй JavaScript функцийг тодорхойлдогgetFormattedDate()
. Энэ функц дотор:- Энэ нь шинэ зүйлийг бий болгодог
Date
ашиглан одоогийн огноо, цагийг төлөөлөх объектconst today = new Date();
. - Энэ нь огноог хүссэн форматаар (мм/dd/yyyy) мөр болгон форматлана
today.toLocaleDateString()
. The'en-US'
аргумент нь форматлах хэл (Америкийн англи хэл) болон объектыг зааж өгдөгyear
,month
Болонday
шинж чанарууд нь огнооны форматыг тодорхойлдог.
- Энэ нь шинэ зүйлийг бий болгодог
return formattedDate;
: Энэ мөр форматлагдсан огноог мөр болгон буцаана.document.getElementById('hiddenDateField').value = getFormattedDate();
: Энэ кодын мөр:- хэрэглээ
document.getElementById('hiddenDateField')
"hiddenDateField" ID-тай далд оруулах талбарыг сонгох. - -Г тохируулна
value
Сонгосон оролтын талбарын шинж чанарыг буцаасан утга руу оруулнаgetFormattedDate()
функц. Энэ нь далд талбарт өнөөдрийн огноог заасан форматаар дүүргэнэ.
- хэрэглээ
Эцсийн үр дүн нь хуудсыг ачаалах үед "hiddenDateField" ID-тай далд оруулах талбарыг "HiddenDateField"-д заасны дагуу өнөөдрийн огноогоор мм/dd/yyyy форматаар, тэргүүлэгч тэггүйгээр бөглөнө. getFormattedDate()
функц.
Маягтын талбарыг өнөөдрийн огноо болон 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 болон JavaScript код нь өнөөдрийн огноотой, мм/dd/yyyy гэж форматлагдсан, тэргүүлэгч тэггүйгээр далд оруулах талбарыг урьдчилан бөглөхийн тулд jQuery-г хэрхэн ашиглахыг харуулж байна. Үүнийг алхам алхмаар задалъя:
<!DOCTYPE html>
болон<html>
: Эдгээр нь HTML5 баримт бичиг гэдгийг илтгэх стандарт HTML баримтын мэдэгдэл юм.<head>
: Энэ хэсгийг вэб хуудасны мета өгөгдөл болон нөөцийг оруулахад ашигладаг.<title>
: Вэб хуудасны гарчгийг “JQuery болон JavaScript огнооны объект бүхий огнооны урьдчилсан төлөв” болгож тохируулна.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Энэ мөрөнд контент хүргэх сүлжээ (CDN)-аас эх сурвалжийг зааж өгөх замаар jQuery номын сан багтана. Энэ нь jQuery номын санг вэб хуудсан дээр ашиглах боломжтой эсэхийг баталгаажуулдаг.<body>
: Энэ бол харагдах контент болон хэрэглэгчийн интерфейсийн элементүүдийг байршуулах вэб хуудасны үндсэн агуулгын хэсэг юм.<form>
: Оролтын талбаруудыг агуулсан HTML маягтын элемент. Энэ тохиолдолд далд оролтын талбарыг багтаахад ашигладаг.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Вэб хуудсан дээр харагдахгүй далд оруулах талбар. Үүнд "hiddenDateField" ID болон "hiddenDateField" гэсэн нэр оноосон.<script>
: Энэ бол JavaScript код бичих боломжтой JavaScript скрипт блокийн нээлтийн шошго юм.$(document).ready(function() { ... });
: Энэ бол jQuery кодын блок юм. Энэ нь ашигладаг$(document).ready()
Хуудсыг бүрэн ачаалсны дараа агуулагдсан код ажиллаж байгаа эсэхийг баталгаажуулах функц. Энэ функц дотор:const today = new Date();
шинэ зүйлийг бий болгодогDate
одоогийн огноо, цагийг илэрхийлэх объект.const formattedDate = today.toLocaleDateString('en-US', { ... });
ашиглан огноог хүссэн форматаар (мм/дг/жжж) мөр болгон форматланаtoLocaleDateString
арга.
$('#hiddenDateField').val(formattedDate);
jQuery ашиглан "hiddenDateField" ID-тай далд оруулах талбарыг сонгон тохируулна.value
форматлагдсан огноо хүртэл. Энэ нь далд талбарыг өнөөдрийн огноог заасан форматаар үр дүнтэйгээр урьдчилан бөглөнө.
jQuery код нь цэвэр JavaScript-тэй харьцуулахад далд оруулах талбарыг сонгох, өөрчлөх үйл явцыг хялбаршуулдаг. Хуудсыг ачаалах үед далд оруулах талбарт өнөөдрийн огноог мм/дг/жжж форматаар дүүргэх бөгөөд энэ хэсэгт заасны дагуу эхний тэг байхгүй болно. formattedDate
хувьсах.