如何配置Element Plus的el-time-picker仅传递时分格式数据？

你遇到的问题是因为el-time-picker默认的v-model绑定的是Date对象，提交时会被序列化为ISO格式的日期字符串。要只传递时分格式，有几种简单的解决方式：

方法1：使用组件的value-format属性（推荐） #

Element Plus的el-time-picker提供了value-format属性，直接指定你需要的格式，这样v-model绑定的就会是对应格式的字符串，而非Date对象。修改你的组件代码：

<el-time-picker
    v-model="form.time"
    format="HH:mm"
    value-format="HH:mm"
    placeholder="Select time"
/>

这样form.time的值会直接是"07:49"这类字符串，提交Axios请求时就不会带日期部分了。

方法2：提交前手动格式化日期 #

如果需要保留v-model的Date对象用于其他逻辑，可以在提交请求前手动提取时分并格式化：

原生JS实现 #

// 处理时分，确保两位数格式
const padZero = num => num.toString().padStart(2, '0');
const formattedTime = `${padZero(form.time.getHours())}:${padZero(form.time.getMinutes())}`;

// 提交请求
axios.post('/your-api-url', {
  ...form,
  time: formattedTime // 替换原有的time字段
});

用dayjs简化（需先安装dayjs） #

如果项目里已经用了dayjs，格式化会更简洁：

import dayjs from 'dayjs';

const formattedTime = dayjs(form.time).format('HH:mm');

axios.post('/your-api-url', {
  ...form,
  time: formattedTime
});

方法3：使用计算属性双向绑定 #

如果需要同时维护Date对象和格式化后的字符串，可以用计算属性做双向绑定：

const form = reactive({
  rawTime: new Date() // 存储原始Date对象
});

// 计算属性，双向绑定时分字符串
const time = computed({
  get() {
    const padZero = num => num.toString().padStart(2, '0');
    return `${padZero(form.rawTime.getHours())}:${padZero(form.rawTime.getMinutes())}`;
  },
  set(val) {
    const [hours, minutes] = val.split(':');
    form.rawTime.setHours(hours);
    form.rawTime.setMinutes(minutes);
  }
});

然后组件绑定这个计算属性：

<el-time-picker
    v-model="time"
    format="HH:mm"
    placeholder="Select time"
/>

这种方式适合需要在组件外使用Date对象做时间计算的场景。

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