How to remove the local timezone from a date in javascript?

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.

Screen capture of the date picker with two different date.

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.

Fediverse Reactions

Comments

One response to “How to remove the local timezone from a date in javascript?”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.