Как да попълните предварително поле на формуляр с днешна дата и 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“ се попълва с днешната дата във формат mm/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 код демонстрира как да използвате jQuery за предварително попълване на скрито поле за въвеждане с днешната дата, форматирана като mm/dd/yyyy, без водещи нули. Нека го разбием стъпка по стъпка:
<!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
променлива.