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 代码:

  1. <!DOCTYPE html><html>:这些是标准 HTML 文档声明,指定这是一个 HTML5 文档。
  2. <head>:此部分通常用于包含有关文档的元数据,例如网页的标题,它是使用 <title> 元件。
  3. <title>:这会将网页的标题设置为“使用 JavaScript 进行日期预填充”。
  4. <body>:这是网页的主要内容区域,您可以在其中放置可见内容和用户界面元素。
  5. <form>:可以包含输入字段的表单元素。在本例中,它用于包含将填充今天日期的隐藏输入字段。
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">:这是一个隐藏的输入字段。它不会出现在页面上,但可以存储数据。它的 ID 为“hiddenDateField”,名称为“hiddenDateField”,以便在 JavaScript 中识别和使用。
  7. <script>:这是 JavaScript 脚本块的开始标记,您可以在其中编写 JavaScript 代码。
  8. function getFormattedDate() { ... }:这定义了一个名为的 JavaScript 函数 getFormattedDate()。在这个函数内部:
    • 它创造了一个新的 Date 表示当前日期和时间的对象 const today = new Date();.
    • 它将日期格式化为具有所需格式(mm/dd/yyyy)的字符串,使用 today.toLocaleDateString()。 该 'en-US' 参数指定用于格式化的区域设置(美式英语),以及带有 year, monthday 属性定义日期格式。
  9. return formattedDate;:此行以字符串形式返回格式化日期。
  10. 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,不带前导零。让我们一步步分解:

  1. <!DOCTYPE html><html>:这些是标准 HTML 文档声明,表明这是一个 HTML5 文档。
  2. <head>:此部分用于包含网页的元数据和资源。
  3. <title>:将网页标题设置为“使用 jQuery 和 JavaScript 日期对象进行日期预填充”。
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>:此行通过指定来自内容分发网络 (CDN) 的源来包含 jQuery 库。它确保 jQuery 库可在网页上使用。
  5. <body>:这是网页的主要内容区域,您可以在其中放置可见内容和用户界面元素。
  6. <form>:用于包含输入字段的 HTML 表单元素。在本例中,它用于封装隐藏的输入字段。
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">:隐藏的输入字段,在网页上不可见。它被分配了一个 ID“hiddenDateField”和一个名称“hiddenDateField”。
  8. <script>:这是 JavaScript 脚本块的开始标记,您可以在其中编写 JavaScript 代码。
  9. $(document).ready(function() { ... });:这是一个 jQuery 代码块。它使用 $(document).ready() 函数以确保页面完全加载后运行所包含的代码。在这个函数内部:
    • const today = new Date(); 创建一个新的 Date 表示当前日期和时间的对象。
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); 使用以下命令将日期格式化为所需格式 (mm/dd/yyyy) 的字符串 toLocaleDateString 方法。
  10. $('#hiddenDateField').val(formattedDate); 使用 jQuery 选择 ID 为“hiddenDateField”的隐藏输入字段并设置其 value 到格式化日期。这可以有效地以指定格式用今天的日期预填充隐藏字段。

与纯 JavaScript 相比,jQuery 代码简化了选择和修改隐藏输入字段的过程。加载页面时,隐藏的输入字段将以 mm/dd/yyyy 格式填充今天的日期,并且不存在前导零,如 formattedDate 变量。

Douglas Karr

Douglas Karr 首席营销官是 开放洞察 和创始人 Martech Zone。 道格拉斯帮助了数十家成功的 MarTech 初创公司,协助进行了超过 5 亿美元的 MarTech 收购和投资尽职调查,并继续协助公司实施和自动化其销售和营销策略。 道格拉斯是国际公认的数字化转型和 MarTech 专家和演讲者。 道格拉斯还是一本傻瓜指南和一本商业领导力书籍的出版作者。

相关文章

返回顶部按钮
关闭

检测到Adblock

Martech Zone 我们能够免费为您提供这些内容,因为我们通过广告收入、联属链接和赞助从我们的网站中获利。 如果您在浏览我们的网站时删除广告拦截器,我们将不胜感激。