在 JavaScript 中为 Input type=”date” 设置当前日期

Set the current Date on an Input type=”date” in JavaScript

要在输入类型上设置当前日期date：

选择输入字段。
使用该value属性在输入字段中设置当前日期。
将当前日期格式化为YYYY-MM-DD.

这是示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <label for="start">Input type Date:</label>
    <input type="date" id="date" name="trip-start" />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js


const dateInput = document.getElementById('date');

// ✅ Using the visitor's timezone
dateInput.value = formatDate();

console.log(formatDate());

function padTo2Digits(num) {
  return num.toString().padStart(2, '0');
}

function formatDate(date = new Date()) {
  return [
    date.getFullYear(),
    padTo2Digits(date.getMonth() + 1),
    padTo2Digits(date.getDate()),
  ].join('-');
}

// ✅ Using UTC (universal coordinated time)
// dateInput.value = new Date().toISOString().split('T')[0];

// console.log(new Date().toISOString().split('T')[0]);

我们使用该方法选择了
输入
类型日期元素getElementById()。

我们可以通过属性设置元素的值value。

设置元素的值时，您必须将日期格式设置为. YYYY-MM-DD

我们创建了一个可重用的函数，将日期格式化为YYYY-MM-DD.

该函数将Date对象作为参数，如果未提供则使用当前日期。

我们在函数中使用了以下3个与日期相关的方法：

Date.getFullYear方法 – 返回代表与日期对应的年份的四位数字。
Date.getMonth0 – 返回一个介于(January) 和(December)之间的整数11，代表给定日期的月份。是的，不幸的是，该getMonth方法已关闭1。
Date.getDate – 返回一个介于和之间的整数1，31表示特定日期的月中日期。

该getMonth方法返回从 0 到 11 的从零开始的月份索引，表示一月是0，十二月是11。

因为该getMonth方法是从零开始的，所以我们将 1 添加到它的返回值。

如果月份或日期的值是单个数字（小于
），该padTo2Digits函数负责
添加前导零。10

日期输入期望日期格式为YYYY-MM-DD，因此尝试设置格式为的日期YYYY-M-D是行不通的。

如果我使用上面的示例加载页面，我可以看到在输入字段中设置了当前日期。

日期输入设置当前日期

上面的示例使用访问者的时区将日期输入的值设置为当前日期。

根据 UTC 在 Input type=”date” 上设置当前日期

如果您需要根据 UTC 将输入的值设置为当前日期，则可以改用该toISOString()方法。

索引.js


const dateInput = document.getElementById('date');

// ✅ Using UTC (universal coordinated time)
dateInput.value = new Date().toISOString().split('T')[0];

console.log(new Date().toISOString().split('T')[0]);

toISOString
()
方法以 ISO 8601 格式返回表示给定日期的字符串 –
YYYY-MM-DDTHH:mm:ss.sssZ。

访问者的时区和 UTC 之间可能存在差异。

如果访问者的时区与 UTC 有偏差，则上述两种方法的日期可能不同。

例如，如果访问者的时区是 UTC+0500（比 UTC 早 5 小时），那么从午夜到 05:00，如果使用 UTC ( ) 方法，他们将获得昨天的日期
toISOString()。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：