同时设置date输入框step属性与调用stepUp/stepDown方法会有何表现？

我在测试date输入框的step属性以及stepDown、stepUp方法时，遇到了无法理解的输出结果。以下是我使用的测试代码：

const date = document.querySelector("input[type='date")
const stepUp = document.querySelector("input#stepUp")                            
const stepDown = document.querySelector("input#stepDown")

stepDown.addEventListener("click",()=>{
    date.step = 10
    date.stepDown(20)
})
stepUp.addEventListener("click",()=>{
    date.step = 10
    date.stepUp(20)
})

问题分析与修正 #

1. 语法错误修复
   代码中document.querySelector("input[type='date")缺少闭合单引号，正确写法应为document.querySelector("input[type='date']")，否则无法正确获取date输入框元素，调用方法时会抛出TypeError。

2. step属性与方法的逻辑说明

   • date类型输入框的step属性单位为天，表示单次步进的天数间隔，默认值为1。
   • stepUp(n)和stepDown(n)的参数n是步进次数，总变化天数为 step 值 × n。比如代码中设置step=10并调用stepUp(20)，实际会在当前日期基础上增加10×20=200天；stepDown(20)则减少200天。

3. 常见困惑点

   • 日期计算会自动处理日历规则：比如月底日期步进后会自动切换月份（如2024-03-31加10天为2024-04-10），闰年2月29日的步进也会正确计算。
   • 主流浏览器（Chrome、Firefox）支持任意正整数的step值，符合HTML规范即可。

修正后的代码：

const date = document.querySelector("input[type='date']");
const stepUp = document.querySelector("input#stepUp");                            
const stepDown = document.querySelector("input#stepDown");

stepDown.addEventListener("click", () => {
    date.step = 10;
    date.stepDown(20);
});
stepUp.addEventListener("click", () => {
    date.step = 10;
    date.stepUp(20);
});

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