求助：如何在HTML的input控件中显示本地日期？现有代码失效

嘿，我来帮你排查下这个表单日期显示的问题～你的代码里有两个关键问题导致功能失效，我给你拆解下并给出修复方案：

问题分析 #

• 元素ID不匹配：你的input控件ID是date，但脚本里却在找dateinsertion，这就导致根本找不到目标元素，自然没法设置值。
• 错误的赋值方式与格式：
  1. 对于type="date"的input，需要设置它的value属性，而不是innerHTML（innerHTML是用来设置元素内部的HTML内容，input的内容是通过value控制的）。
  2. toLocaleDateString()返回的日期格式是和地区相关的（比如MM/DD/YYYY或者DD/MM/YYYY），但type="date"的input只接受YYYY-MM-DD格式的字符串，所以浏览器无法识别你设置的格式。

修复后的代码 #

<!DOCTYPE html>
<html>
<body>
Insertion date: <input type="date" id="date">
<script>
// 通过正确的ID获取日期输入框
const dateInput = document.getElementById("date");
// 将日期转换为ISO格式并截取前10位，得到YYYY-MM-DD的标准格式
dateInput.value = new Date().toISOString().split('T')[0];
</script>
</body>
</html>

代码解释 #

1. 获取正确元素：用getElementById("date")拿到你的日期输入框，和HTML里的ID对应上。
2. 生成标准格式日期：new Date().toISOString()会生成类似2024-05-20T14:30:00.000Z的字符串，我们用split('T')[0]截取T之前的部分，正好是YYYY-MM-DD格式，完全符合date输入框的要求。
3. 赋值给value属性：把标准格式的日期赋值给input的value，浏览器就会自动识别并显示为本地日期啦（注：ISO字符串是UTC时间，但date输入框会自动转换为你的本地时区显示）。

如果你偏好使用toLocaleDateString，也可以指定地区参数来生成YYYY-MM-DD格式，比如：

dateInput.value = new Date().toLocaleDateString('en-CA');

不过用ISO字符串的方式更通用，不需要依赖特定地区设置。

内容的提问来源于stack exchange，提问作者Skander Jenhani