i have a time picker vue3 time picker object [ "hh", "mm", "ss", "A" ] when goes to vue componet to laravel request data is like 02:30:02 PM. it save in mysql table expire_time field time data type . when retrieve from database laravel controller return 14:45:02 this format to vue component vue component receive data as below

this.form.expire_time =response.data.information_send_list.expire_time;

it give error. do not show time in time picker

i have a time picker vue3 time picker object [ "hh", "mm", "ss", "A" ] when goes to vue componet to laravel request data is like 02:30:02 PM. it save in mysql table expire_time field time data type . when retrieve from database laravel controller return 14:45:02 this format to vue component vue component receive data as below

this.form.expire_time =response.data.information_send_list.expire_time;

it give error. do not show time in time picker

• laravel
• vuejs3

1 Answer 1

The issue you're facing is due to the difference in time formats between Laravel and Vue. Laravel is returning the time in 24-hour format (14:45:02), while your Vue time picker expects the time in 12-hour format with AM/PM (02:45:02 PM).

To fix this, you can use a JavaScript function to convert the 24-hour time format to 12-hour format with AM/PM. Here's an example:

function convertTime(time) {
  const [hours, minutes, seconds] = time.split(':');
  const hours12 = parseInt(hours) % 12 === 0 ? 12 : parseInt(hours) % 12;
  const ampm = parseInt(hours) < 12 ? 'AM' : 'PM';
  return `${hours12.toString().padStart(2, '0')}:${minutes}:${seconds} ${ampm}`;
}

// Usage:
this.form.expire_time = convertTime(response.data.information_send_list.expire_time);

Alternatively you could use a package like momentJS to convert your date into the right format