TimePicker选完时间后怎么拿到值？

书生シ广云提问于 2026-02-27 17:39:17 阅读 26

组件

我在用 Element Plus 的 TimePicker，选了时间之后不知道怎么把值取出来，试了 @change 但好像没触发？

现在代码是这样：

<el-time-picker v-model="selectedTime" @change="handleTimeChange" />

但是 handleTimeChange 根本没进，是不是应该用别的事件？

我来解答赞 5 收藏

反馈

1 条解答

小炜曦 Lv1

你这个写法其实没大问题，但得看几个关键点。

首先确认 v-model="selectedTime" 里的 selectedTime 是不是在 data 里初始化了，比如：

data() {

  return {

    selectedTime: null // 或者 new Date()，但注意 TimePicker 要求是 Date 对象或字符串（格式要对）

  }

}

如果初始化是 '' 或 undefined，Element Plus 可能不会触发 @change，尤其是第一次选的时候。

然后 @change 事件是会触发的，但参数顺序你可能记错了——它是 (value, oldValue)，不是 (event)。你打印下试试：

handleTimeChange(val, oldVal) {

  console.log('新值：', val, '旧值：', oldVal)

}

如果还是不进，大概率是 selectedTime 类型不对。TimePicker 的 v-model 要求是 Date 对象（推荐）或符合格式的字符串（比如 '14:30:00'）。你要是初始化成字符串，又选了不匹配的格式，内部解析失败，可能连 change 都不触发。

建议改成：

selectedTime: new Date() // 或 new Date('2024-01-01T14:30:00') 这种带时间的

服务端如果要存，一般前端传 val.getTime() 或 val.toISOString() 过来，你后端再处理成时间戳或 datetime 字段。

如果这些都确认了还不行，贴下你的 data 和 handleTimeChange 完整定义，我帮你看看是不是作用域或拼写问题。

2026-02-27 18:00