vue.jselement-plus

How sending data from el-time-picker to pass only hours:minutes data?


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",

Solution

  • 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").