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
变量。