设置HTML type为time的input时出现无效时间输入错误如何解决？

• 默认情况下，<input type="time"> 未显式设置 step 属性时，默认步长为60秒，仅接受精确到分钟的HH:mm格式时间值。
• 直接使用 new Date() 赋值给 valueAsDate 时，Date 对象包含秒、毫秒信息，最终生成的时间值格式为 HH:mm:ss.fff，不符合输入框的内置校验规则，因此触发有效性错误提示。
• 该问题和德语版Windows系统环境无关，属于HTML表单控件的标准校验逻辑，所有遵循标准的浏览器都会出现该表现。

根据使用场景可以选择两种适配方案：

场景1：需要输入框支持带秒的时间 #

给input元素添加step="1"属性即可，步长设为1代表支持秒级精度，设为0.001可支持毫秒级精度：

<input type="time" id="tm" name="tm" step="1">

修改后原有赋值代码无需调整即可正常运行。

场景2：仅需要分钟级精度（保持原有输入框表现） #

赋值前将Date对象的秒、毫秒清零即可：

const now = new Date();
// 依次将秒、毫秒设置为0
now.setSeconds(0, 0);
document.getElementById('tm').valueAsDate = now;

也可以直接手动拼接HH:mm格式的字符串赋值给value属性：

const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
document.getElementById('tm').value = `${hours}:${minutes}`;

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