I’m working on a web app with Vuejs and Vuetify and I need to use date without zone, or always in UTC.
And that was quit hard to handle because the browser always show the Date object like it is in the local timezone.
Basically, with a date picker, the date in the javascript object is 2025-12-30T23:00:00Z instead of 2025-12-31T00:00:00Z because I’m in the ‘Central European Time’ (CET) UTC+1.

The only way I found is use the getFullYear(), the getMonth() and the getDate() method of Date to create a new date with new Date(Date.UTC()). This way I only have a date without shift: Wed, 31 Dec 2025 00:00:00 GMT Houray !!
But now the date that is shown in the input text is Wed Dec 31 2025 01:00:00 GMT+0100 (Central European Standard Time) because by default the browser do that. So I needed to use :model-value="date?.toUTCString()" !
In the end I use the well known toJSON() method to send the date to the backend.
If you want to see more code, here is my DateDialog.vue component:
<template>
<v-text-field
:model-value="date?.toUTCString()"
label="Expiry date" readonly variant="outlined">
<v-dialog v-model="showDialog"
activator="parent" width="auto">
<v-date-picker v-model="date"
@update:model-value="format"
label="Expiry date" show-adjacent-months />
</v-dialog>
</v-text-field>
</template>
<script setup>
import { ref } from 'vue'
const emit = defineEmits(['newDate'])
const date = ref(null)
const showDialog = ref(false)
function format(_date) {
const UTCDate = new Date(Date.UTC(
_date.getFullYear(),
_date.getMonth(),
_date.getDate()))
date.value = UTCDate
showDialog.value = false
emit('newDate', UTCDate)
}
</script>
If you know another way to do that, please, let me know.
Thank you for reading.

Leave a Reply