Vue3 Time Picker无法显示Laravel返回的时间问题

你的问题核心是时间格式不匹配：Vue3时间选择器需要带AM/PM的12小时制格式（比如02:30:02 PM），但Laravel返回的是MySQL存储的24小时制时间（比如14:45:02），选择器无法解析所以报错。

有两种简单的解决思路：

方案一：Laravel端转换格式返回 #

利用Laravel自带的Carbon扩展，把24小时制时间转成选择器需要的格式再返回。在控制器处理数据时：

use Carbon\Carbon;

// 假设你从模型取出数据
$info = InformationSendList::find($id);
// 转换expire_time格式
$info->expire_time = Carbon::parse($info->expire_time)->format('h:i:s A');

return response()->json([
    'information_send_list' => $info
]);

方案二：Vue端转换格式后赋值 #

如果不想改动后端，在Vue里写个简单的转换函数，把24小时制时间转成12小时制带AM/PM的格式：

// 定义转换函数
convertTo12Hour(timeStr) {
  if (!timeStr) return '';
  const [h, m, s] = timeStr.split(':').map(Number);
  const period = h >= 12 ? 'PM' : 'AM';
  const formattedH = h % 12 || 12; // 把0点转为12，13点转为1，以此类推
  return `${formattedH.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')} ${period}`;
}

// 赋值时调用函数
this.form.expire_time = this.convertTo12Hour(response.data.information_send_list.expire_time);

选其中一种方案就能让时间选择器正常显示了。

内容的提问来源于stack exchange，提问作者Ashraful Islam