On vuejs site using el-time-picker complonent of element-plus library as :

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

When posting form data with axios I see that requested data has format with today date, like : 2025-03-18T07:49:57.000Z

I wonder how can I set options of el-time-picker complonent to post only hours:minutes data, like : 07:49 ?

"element-plus": "^2.9.5",
"vue": "^3.5.13",
"axios": "^1.7.4",

On vuejs site using el-time-picker complonent of element-plus library as :

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

When posting form data with axios I see that requested data has format with today date, like : 2025-03-18T07:49:57.000Z

I wonder how can I set options of el-time-picker complonent to post only hours:minutes data, like : 07:49 ?

"element-plus": "^2.9.5",
"vue": "^3.5.13",
"axios": "^1.7.4",

• vue.js
• element-plus

• Probably a matter of formatting the date, depends if you want to use date-fns or do it with some other API. – kissu Commented Mar 18 at 12:20

1 Answer 1

TimePicker will work with the full timestamp, format will only alter the way it's displayed.

You'll need another variable that will serve as a model value, and simply format it before sending:

const timestamp = ref<Date>();

// ...

watch(timestamp, (newVal) => {
  form.time = newVal?.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
}

You can use another locale that uses 24-hour notation (note that, for example, en causes the result to be "02:09 PM").