phplaravelvue.jsdatepickerlaravel-12

Why in element-plus date-picker component on save lose 1 day?


In Laravel 12 / vuejs 33.5.13 / element-plus 2.9.5 app I use date-picker component

<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 Day"
            />
        </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="saveElection">Save</el-button>
    </span>
</el-dialog>

methods: {
    addItem() {
        this.form = {id: null, type: '', day: new Date()};
        ...
    },

But when I select I see that saved data is minus 1 day. Say, I if I selected 2025-04-29, value 2025-04-28T21:00:00.000Z is requested to database and in db table I see 2025-04-28

config/app.php I have :

'timezone' => 'Europe/Kyiv',

I read docs at https://element-plus.org/en-US/component/date-picker.html#enter-date, but did not find if timezone can be set for el-date-picker component or for element-plus library. How can I fix it ?


Solution

  • el-date-picker still uses UTC. (2025-04-28T21:00:00.000Z)

    try something like this

    saveElection() {
        const date = new Date(this.form.day);
        const formattedDate = date.toLocaleDateString('sv-SE', { timeZone: 'Europe/Kyiv' });
    
        axios.post('/your-api-url', {
            ...this.form,
            day: formattedDate # "2025-04-29"
        });
    }