Како унапред попунити поље обрасца данашњим датумом и ЈаваСцрипт-ом или ЈКуери-јем
Иако многа решења нуде могућност чувања датума са сваким уносом обрасца, постоје други случајеви када то није опција. Подстичемо наше клијенте да додају скривено поље на своју веб локацију и проследе ове информације заједно са уносом како би могли да прате када се уносе у образац. Користећи ЈаваСцрипт, ово је лако.
Како унапред попунити поље обрасца са данашњим датумом и ЈаваСцрипт-ом
<!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>
Хајде да разложимо дати ХТМЛ и ЈаваСцрипт код корак по корак:
<!DOCTYPE html>
<html>
: Ово су стандардне декларације ХТМЛ документа које наводе да је ово ХТМЛ5 документ.<head>
: Овај одељак се обично користи за укључивање метаподатака о документу, као што је наслов веб странице, који се подешава помоћу<title>
елемент.<title>
: Ово поставља наслов веб странице на „Препопулација датума са ЈаваСцрипт-ом“.<body>
: Ово је главна област садржаја веб странице где постављате видљиви садржај и елементе корисничког интерфејса.<form>
: Елемент обрасца који може да садржи поља за унос. У овом случају, користи се да садржи скривено поље за унос које ће бити попуњено данашњим датумом.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ово је скривено поље за унос. Не појављује се на страници, али може да чува податке. Дат му је ИД „хидденДатеФиелд“ и име „хидденДатеФиелд“ за идентификацију и употребу у ЈаваСцрипт-у.<script>
: Ово је почетна ознака за блок ЈаваСцрипт скрипте, где можете написати ЈаваСцрипт код.function getFormattedDate() { ... }
: Ово дефинише ЈаваСцрипт функцију која се зовеgetFormattedDate()
. Унутар ове функције:- То ствара ново
Date
објекат који представља тренутни датум и време користећиconst today = new Date();
. - Он форматира датум у низ са жељеним форматом (мм/дд/гггг) користећи
today.toLocaleDateString()
.'en-US'
аргумент специфицира локализацију (амерички енглески) за форматирање, а објекат саyear
,month
, иday
својства дефинише формат датума.
- То ствара ново
return formattedDate;
: Ова линија враћа форматирани датум као стринг.document.getElementById('hiddenDateField').value = getFormattedDate();
: Ова линија кода:- vi користите
document.getElementById('hiddenDateField')
да изаберете скривено поље за унос са ИД-ом „хидденДатеФиелд“. - Поставља
value
својство изабраног поља за унос на вредност коју враћаgetFormattedDate()
функција. Ово попуњава скривено поље данашњим датумом у наведеном формату.
- vi користите
Крајњи резултат је да када се страница учита, скривено поље за унос са ИД-ом „хидденДатеФиелд“ се попуњава данашњим датумом у формату мм/дд/гггг без водећих нула, као што је наведено у getFormattedDate()
функција.
Како унапред попунити поље обрасца данашњим датумом и јКуери-јем
<!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>
Овај ХТМЛ и ЈаваСцрипт код показује како да користите јКуери да унапред попуните скривено поље за унос данашњим датумом, форматираним као мм/дд/гггг, без водећих нула. Хајде да га разложимо корак по корак:
<!DOCTYPE html>
<html>
: Ово су стандардне декларације ХТМЛ документа које указују да је ово ХТМЛ5 документ.<head>
: Овај одељак се користи за укључивање метаподатака и ресурса за веб страницу.<title>
: Поставља наслов веб странице на „Препопулација датума са јКуери и ЈаваСцрипт објектом датума“.<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Ова линија укључује јКуери библиотеку наводећи њен извор из мреже за испоруку садржаја (ЦДН). Обезбеђује да је јКуери библиотека доступна за коришћење на веб страници.<body>
: Ово је главна област садржаја веб странице где постављате видљиви садржај и елементе корисничког интерфејса.<form>
: ХТМЛ елемент обрасца који се користи да садржи поља за унос. У овом случају, користи се за капсулирање скривеног поља за унос.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Скривено поље за унос које неће бити видљиво на веб страници. Додељен му је ИД „хидденДатеФиелд“ и назив „хидденДатеФиелд“.<script>
: Ово је почетна ознака за блок ЈаваСцрипт скрипте где можете написати ЈаваСцрипт код.$(document).ready(function() { ... });
: Ово је блок јКуери кода. Користи се$(document).ready()
функцију која осигурава да се садржани код покреће након што се страница у потпуности учита. Унутар ове функције:const today = new Date();
ствара новоDate
објекат који представља тренутни датум и време.const formattedDate = today.toLocaleDateString('en-US', { ... });
форматира датум у низ са жељеним форматом (мм/дд/гггг) користећиtoLocaleDateString
метод.
$('#hiddenDateField').val(formattedDate);
бира скривено поље за унос са ИД-ом „хидденДатеФиелд“ користећи јКуери и постављаvalue
до форматираног датума. Ово ефективно унапред попуњава скривено поље данашњим датумом у наведеном формату.
ЈКуери код поједностављује процес одабира и модификације скривеног поља за унос у поређењу са чистим ЈаваСцрипт-ом. Када се страница учита, скривено поље за унос се попуњава данашњим датумом у формату мм/дд/гггг и нема водећих нула, као што је наведено у formattedDate
променљива.