Vue3 與 Laravel 前後端 Timezone 轉換傳值解決方式

日期在前後端傳送時，常會因時區(Timezone) 的問題，造成日期/時間的不一致，下面舉個實例及解決方法來說明。

Vue 前端往後端 Laravel 傳值時的截圖如下

實際的傳值如下

{
    "user_id": 4,
    "title": "冷鏈倉儲擴建，提升食品與藥品存儲標準",
    "content": "我們正式啟用全新冷鏈倉儲區，提供 -18°C 冷凍存儲空間，符合 HACCP、GMP 等國際標準。",
    "tags": [],
    "status": "draft",
    "visible": "public",
    "category": {
        "id": 1,
        "name": "最新消息",
        "order": 0,
        "enabled": 1
    },
    "clearUploadFile": false,
    "published_at": "2025-05-23 00:00:00",
    "unpublished_at": "2025-05-29T16:00:00.000Z",
    "id": "1"
}

可以發現前端 unpublished_at 本來是 “Fri May 30 2025 00:00:00 GMT+0800” ，用 new Date(unpublished_at) 轉成 Date 物件後，傳送到後端 JSON 格式的 UTC 時間字串變成了: 2025-05-29T16:00:00.000Z

.toISOString() 可得到格式很接近的答案，但它一律使用 UTC 時區沒得修改。

const data = {
            form_data: {
                user_id: userStore.user.id,
                title: values.title,
                content: content.value,
                tags: tags.value,
                status: selectedStatus.value,
                visible: selectedVisible.value,
                category: selectedCategory.value,
                clearUploadFile: clearUploadFile.value,
                published_at: new Date(published_at.value).toLocaleString('sv'),
                unpublished_at: new Date(unpublished_at.value)
            },
            file: event.files
        }

如何用原生 API 先轉成本地時間的 yyyy-MM-mm HH:mm:ss 格式 2025-05-29 00:00:00？

將下行程式
unpublished_at: new Date(unpublished_at.value)

改成
unpublished_at: new Date(unpublished_at.value).toLocaleString('sv')

前端日期時間先轉化成本地時區 new Date(unpublished_at.value).toLocaleString(‘sv’) 這樣時間就不會跑掉了

.toLocaleString() API支援地區設定參數(Locale，如台灣是 zh-TW、美國是 en-US)，而 sv 是瑞典(Swedish)的地區代碼，巧的是瑞典慣用的日期格式是 yyyy-MM-dd，時間格式是 HH:mm:ss (24 小時制)，就醬，不費吹灰之力就得到我們要的 yyyy-MM-dd HH:mm:ss。

參考:

https://blog.darkthread.net/blog/js-date-yyyymmdd-hhmmss