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 ?
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"
});
}