CRM和數據平台
如何使用今天的日期和 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">
:這是一個隱藏的輸入欄位。 它不會出現在頁面上,但可以儲存資料。 它的 ID 為“hiddenDateField”,名稱為“hiddenDateField”,以便在 JavaScript 中識別和使用。<script>
:這是 JavaScript 腳本區塊的開始標記,您可以在其中編寫 JavaScript 程式碼。function getFormattedDate() { ... }
:這定義了一個名為的 JavaScript 函數getFormattedDate()
。 在這個函數內部:- 它創造了一個新的
Date
表示當前日期和時間的對象const today = new Date();
. - 它將日期格式化為具有所需格式(mm/dd/yyyy)的字串,使用
today.toLocaleDateString()
。 “'en-US'
參數指定用於格式化的區域設定(美式英語),以及帶有year
,month
和day
屬性定義日期格式。
- 它創造了一個新的
return formattedDate;
:此行以字串形式傳回格式化日期。document.getElementById('hiddenDateField').value = getFormattedDate();
:這行程式碼:- 用途
document.getElementById('hiddenDateField')
選擇 ID 為「hiddenDateField」的隱藏輸入欄位。 - 設置
value
所選輸入欄位的屬性為傳回的值getFormattedDate()
功能。 這將以指定格式使用今天的日期填入隱藏欄位。
- 用途
最終結果是,當頁面載入時,ID 為「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>
:此行透過指定來自內容分發網路 (CDN) 的來源來包含 jQuery 函式庫。 它確保 jQuery 庫可在網頁上使用。<body>
:這是網頁的主要內容區域,您可以在其中放置可見內容和使用者介面元素。<form>
:用於包含輸入欄位的 HTML 表單元素。 在本例中,它用於封裝隱藏的輸入欄位。<input type="hidden" id="hiddenDateField" name="hiddenDateField">
:隱藏的輸入字段,在網頁上不可見。 它的 ID 為“hiddenDateField”,名稱為“hiddenDateField”。<script>
:這是 JavaScript 腳本區塊的開始標記,您可以在其中編寫 JavaScript 程式碼。$(document).ready(function() { ... });
:這是一個 jQuery 程式碼區塊。 它使用$(document).ready()
函數以確保頁面完全加載後運行所包含的程式碼。 在這個函數內部:const today = new Date();
創建一個新的Date
表示目前日期和時間的物件。const formattedDate = today.toLocaleDateString('en-US', { ... });
使用以下命令將日期格式化為所需格式 (mm/dd/yyyy) 的字串toLocaleDateString
方法。
$('#hiddenDateField').val(formattedDate);
使用 jQuery 選擇 ID 為「hiddenDateField」的隱藏輸入欄位並設定其value
到格式化日期。 這可以有效地用指定格式的今天日期預先填入隱藏欄位。
與純 JavaScript 相比,jQuery 程式碼簡化了選擇和修改隱藏輸入欄位的過程。 載入頁面時,隱藏的輸入欄位將以 mm/dd/yyyy 格式填入今天的日期,並且不存在前導零,如 formattedDate
變量。