Як загадзя запоўніць поле формы сённяшняй датай і 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>
: Гэта стандартныя дэкларацыі дакументаў HTML, якія вызначаюць, што гэта дакумент HTML5.<head>
: Гэты раздзел звычайна выкарыстоўваецца для ўключэння метададзеных аб дакуменце, такіх як назва вэб-старонкі, якая ўсталёўваецца з дапамогай<title>
элемент.<title>
: гэта задае загаловак вэб-старонкі «Папярэдняе запаўненне даты з дапамогай JavaScript».<body>
: Гэта асноўная вобласць кантэнту вэб-старонкі, дзе вы размяшчаеце бачны кантэнт і элементы карыстальніцкага інтэрфейсу.<form>
: Элемент формы, які можа ўтрымліваць палі ўводу. У гэтым выпадку ён выкарыстоўваецца для ўтрымання схаванага поля ўводу, якое будзе запаўняцца сённяшняй датай.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Гэта схаванае поле ўводу. Ён не з'яўляецца на старонцы, але можа захоўваць даныя. Яму дадзены ідэнтыфікатар “hiddenDateField” і імя “hiddenDateField” для ідэнтыфікацыі і выкарыстання ў JavaScript.<script>
: Гэта адкрывальны тэг для блока скрыпту JavaScript, дзе вы можаце напісаць код JavaScript.function getFormattedDate() { ... }
: Гэта вызначае функцыю JavaScript, якая называеццаgetFormattedDate()
. Унутры гэтай функцыі:- Гэта стварае новае
Date
аб'ект, які прадстаўляе бягучую дату і час з выкарыстаннемconst today = new Date();
. - Ён фарматуе дату ў радок з патрэбным фарматам (мм/дд/гггг).
today.toLocaleDateString()
.'en-US'
аргумент вызначае лакаль (амерыканская англійская) для фарматавання, а аб'ект зyear
,month
, іday
ўласцівасці вызначае фармат даты.
- Гэта стварае новае
return formattedDate;
: Гэты радок вяртае адфарматаваную дату ў выглядзе радка.document.getElementById('hiddenDateField').value = getFormattedDate();
: Гэты радок кода:- Выкарыстоўвае
document.getElementById('hiddenDateField')
каб выбраць схаванае поле ўводу з ідэнтыфікатарам «hiddenDateField». - Усталёўвае
value
уласцівасць абранага поля ўводу да значэння, якое вяртаеgetFormattedDate()
функцыя. Гэта запаўняе схаванае поле сённяшняй датай у вызначаным фармаце.
- Выкарыстоўвае
Канчатковым вынікам з'яўляецца тое, што пры загрузцы старонкі схаванае поле ўводу з ідэнтыфікатарам "hiddenDateField" запаўняецца сённяшняй датай у фармаце мм/дд/гггг без нулёў у пачатку, як паказана ў 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 дэманструе, як выкарыстоўваць jQuery для папярэдняга запаўнення схаванага поля ўводу сённяшняй датай у фармаце мм/дд/гггг без нулёў у пачатку. Разбяром гэта крок за крокам:
<!DOCTYPE html>
і<html>
: Гэта стандартныя дэкларацыі дакументаў HTML, якія паказваюць, што гэта дакумент HTML5.<head>
: Гэты раздзел выкарыстоўваецца для ўключэння метададзеных і рэсурсаў для вэб-старонкі.<title>
: Задае загаловак вэб-старонкі «Папярэдняе запаўненне даты з дапамогай аб'екта даты jQuery і JavaScript».<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Гэты радок уключае бібліятэку jQuery, указваючы яе крыніцу з сеткі дастаўкі кантэнту (CDN). Гэта гарантуе, што бібліятэка jQuery даступная для выкарыстання на вэб-старонцы.<body>
: Гэта асноўная вобласць кантэнту вэб-старонкі, дзе вы размяшчаеце бачны кантэнт і элементы карыстальніцкага інтэрфейсу.<form>
: элемент формы HTML, які выкарыстоўваецца для ўтрымання палёў уводу. У гэтым выпадку ён выкарыстоўваецца для інкапсуляцыі схаванага поля ўводу.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: схаванае поле ўводу, якое не будзе бачна на вэб-старонцы. Яму прысвоены ідэнтыфікатар «hiddenDateField» і імя «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);
выбірае схаванае поле ўводу з ідэнтыфікатарам “hiddenDateField” з дапамогай jQuery і ўсталёўвае ягоvalue
да адфарматаванай даты. Гэта фактычна загадзя запаўняе схаванае поле сённяшняй датай у вызначаным фармаце.
Код jQuery спрашчае працэс выбару і змены схаванага поля ўводу ў параўнанні з чыстым JavaScript. Калі старонка загружаецца, схаванае поле ўводу запаўняецца сённяшняй датай у фармаце мм/дд/гггг, без нулёў у пачатку, як паказана ў formattedDate
пераменная.