日期是 web 开发中常见的一种数据类型。在前端开发中，我们经常需要获取并展示当前日期，并且有时需要将其添加到输入框中方便用户操作。那么，在 JavaScript 中如何获取当前格式化日期？又如何将其添加到输入框中呢？本文将为大家详细介绍。
获取当前格式化日期
在 JavaScript 中，我们可以使用 Date 对象来获取当前日期。具体实现方法如下：
const now = new Date();
const year = now.getFullYear(); // 获取年份，如：2023
const month = now.getMonth() + 1; // 获取月份，从 0 开始计数，所以加 1，如：4
const day = now.getDate(); // 获取天数，如：7
const formattedDate = `${day}/${month}/${year}`; // 格式化日期为 dd/mm/yyyy，如：7/4/2023上述代码中，我们首先创建了一个 Date 对象来表示当前时间戳。然后，我们分别调用 getFullYear()、getMonth() 和 getDate() 方法来获取当前年份、月份和天数。由于 getMonth() 返回的值是从 0 开始计数的，因此我们需要将其加 1 才能得到正确的月份。最后，我们将这些值拼接成格式化后的日期字符串。
将日期添加到输入框中
要将格式化后的日期添加到输入框中，我们可以使用 DOM API 中的 value 属性来设置输入框的值。具体实现方法如下：
<input type="text" id="date-input"> <button id="copy-button">复制</button>
const input = document.getElementById('date-input');
const copyButton = document.getElementById('copy-button');
input.value = formattedDate; // 将格式化后的日期设置为输入框的值
copyButton.addEventListener('click', () => {
input.select(); // 选中输入框中的文本
document.execCommand('copy'); // 执行复制命令
});上述代码中，我们首先在 HTML 中创建了一个文本输入框和一个按钮。然后，在 JavaScript 中，我们使用 document.getElementById() 方法获取这些元素，并将格式化后的日期设置为输入框的值。最后，我们为按钮添加了一个点击事件监听器，在用户单击按钮时选中输入框中的文本并执行复制命令。
需要注意的是，在某些浏览器上，document.execCommand('copy') 可能无法正常工作。对于这种情况，我们可以使用 Clipboard API 来实现复制操作。具体实现方法可以参考 MDN 文档。
总结
本文介绍了如何在 JavaScript 中获取当前格式化日期，并将其添加到输入框中以方便用户操作。通过学习本文内容，读者可以更加深入地理解 JavaScript 中的日期处理和 DOM 操作。同时，本文还提供了完整的示例代码以供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9199
