DatePicker 组件选完日期后值没更新到 input 里怎么办?

轩辕静薇 阅读 36

我用原生 HTML 写了个 DatePicker,但点选日期后 input 框里的值没变,控制台也没报错,不知道是哪里漏了?

我已经绑定了 onchange 事件,但好像根本没触发。试过手动 focus 也不行,是不是得用 JavaScript 主动赋值?

<input type="date" id="myDate" onchange="console.log(this.value)" />
<script>
  // 点选日期后 console 没输出,input 值看起来也没变(虽然实际可能变了?)
</script>
我来解答 赞 18 收藏
二维码
手机扫码查看
2 条解答
梦轩 Dev
你遇到的问题可能是由于浏览器对日期输入框的变化检测机制不太一样导致的。有时候 onchange 事件可能在你期望的时候不会触发,特别是当日期选择器的值改变但焦点没有离开输入框时。

你可以试试用 oninput 事件来代替 onchange。这样可以确保每次用户选择一个新日期时,事件都会被触发。修改后的代码如下:




希望这样能解决问题,希望能帮到你!
点赞
2026-03-22 08:20
❤红娟
❤红娟 Lv1
检查下浏览器支不支持 type="date",不支持的话会回退成 text 输入框,onchange 行为就不对。改成用 oninput 事件试试,或者直接 console.log(this.value) 写在别的事件里看能不能拿到值。
点赞
2026-03-14 13:00