Element-Plus Date-Picker组件保存时丢失一天的问题求助

嘿，我看你在Laravel 12 + Vue 3.5.13 + Element-Plus 2.9.5的项目里用日期选择器时遇到了保存丢失一天的问题，这坑我之前也踩过！大概率是时区转换搞的鬼，给你捋捋原因和解决办法：

先补全下你没写完的组件代码（应该是这样的常见结构）：

<el-dialog v-model="dialogVisible" title="Select Day">
    <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="Day" prop="day">
            <el-date-picker
                v-model="form.day"
                type="date"
                placeholder="Select Date"
            />
        </el-form-item>
    </el-form>
</el-dialog>

问题根源 #

Element-Plus的el-date-picker默认返回的是带时区的Date对象，比如你选了2024-10-01，前端拿到的可能是Sat Oct 01 2024 00:00:00 GMT+0800 (中国标准时间)。而Laravel默认用UTC时区，当这个Date对象传到后端时，会被转换成UTC时间（也就是2024-09-30 16:00:00），后端存到数据库里就变成了9月30号，看起来就像“丢了一天”。

解决办法 #

1. 让组件直接返回日期字符串（最省心）

给el-date-picker加上value-format="YYYY-MM-DD"属性，这样v-model绑定的form.day就会是"2024-10-01"这种纯字符串，后端直接接收存储，完全不会有时区问题：

<el-date-picker
    v-model="form.day"
    type="date"
    placeholder="Select Date"
    value-format="YYYY-MM-DD"
/>

2. 前端手动格式化日期（如果必须用Date对象）

如果你的业务逻辑需要先处理Date对象，那提交前可以用原生JS或者Day.js把日期转成标准的YYYY-MM-DD字符串：

// 原生JS格式化方法
const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

// 提交时转换后再传给后端
const submitData = {
    ...form,
    day: formatDate(form.day)
};

3. 后端统一处理时区（不推荐，但可尝试）

如果你不想改前端，可以在Laravel模型里定义修改器，把接收的日期转换成目标时区：

// 模型中的修改器，保存时转换为正确日期
public function setDayAttribute($value)
{
    $this->attributes['day'] = Carbon::parse($value)->timezone('Asia/Shanghai')->toDateString();
}

不过这种方式不如前端处理直接，毕竟用户选的日期就是想要的结果，直接传字符串最不容易出错。

你可以先试试第一种方法，亲测有效！

备注：内容来源于stack exchange，提问作者mstdmstd