Fixing Timezone Issue in VueJs 3 with Axios POST Request

Question

Fixing Timezone Issue in VueJs 3 with Axios POST Request

Having an issue with axios. In my application, I have an input field for datetime-local. When I select a date and time, the displayed time is correct (e.g., selecting 10:00 shows as 10:00), but when calling a function using axios.post, the request sends the data with the wrong timezone (axios posts 9:00 instead of 10:00).

Here is a snippet of my code:

Input Field

<input type="datetime-local" class="form-control" id="form-control-classesStart" v-model="newClasse.classesStart">

Function Call

      this.newClasse.roomId = this.selectedItem.id
      this.axios.post(Linklist.apiClasses, this.newClasse)
      .then(response =>{
        console.log(response)
        this.$store.dispatch('loadClasses') // refresh data from database
      })
      .catch(err => {
        console.log('Something went wrong: ', err)
      })
    },

Screenshot from the app

You can see: 13:50 instead of 14:50

Any suggestions on how to resolve this issue?

EDIT:

I am considering storing the time in UTC timezone and converting it using a function on the front-end. Is this a good or bad idea?

javascript vue.js axios timezone

Answer 1

Answer №1

For those seeking assistance, this response may be beneficial: https://github.com/axios/axios/issues/1548#issuecomment-548306666

In summary; When using axios, dates are automatically converted to UTC.

Answer 2

For those seeking assistance, this response may be beneficial: https://github.com/axios/axios/issues/1548#issuecomment-548306666

In summary; When using axios, dates are automatically converted to UTC.

Answer 3

Answer №2

When making axios calls, the default behavior is to use JSON.stringify() for serializing dates, which converts them to UTC date strings. However, if your project does not require UTC time, you can simply override the Date's toJSON() function.

Below is an example of how to override the toJSON() function using the moment library:

import moment from 'moment'
Date.prototype.toJSON = function(){ return moment(this).format(); }
console.log(JSON.stringify(new Date()))

Answer 4

When making axios calls, the default behavior is to use JSON.stringify() for serializing dates, which converts them to UTC date strings. However, if your project does not require UTC time, you can simply override the Date's toJSON() function.

Below is an example of how to override the toJSON() function using the moment library:

import moment from 'moment'
Date.prototype.toJSON = function(){ return moment(this).format(); }
console.log(JSON.stringify(new Date()))

Fixing Timezone Issue in VueJs 3 with Axios POST Request

Answer №1

Answer №2

Similar questions

Convert HTML to PDF and ensure that the table fits perfectly on an A4

Display a loading message using jQuery Dialog when the page is loading

The combination of select2 and jsonform is not functioning properly

Tips on selecting the active color ID from a list of available color IDs

Building a High-Performance Angular 2 Application: A Comprehensive Guide from Development to

Use ajax, javascript, and php to insert information into a database

Steps to avoid NuxtJS from merging all CSS files

Exploring creative methods for incorporating images in checkboxes with CSS or potentially JavaScript

Change object values to capital letters

What is the most effective method for serializing SVG data from the client's Document Object Model (DOM

The Link Breaks the Overlay Hover Effect

Creating a video game HUD effect using JavaScript and HTML5

What is the best way to retrieve the value of a checked radio button in React.js?

Looking to retrieve the key value or iteration of a specific item within an Angular UI tree?

Confirm that the form is valid when a specific requirement is fulfilled

Effortlessly transfer files with Ajax through Box

The property 'clone' is undefined and cannot be read

Trouble with AngularJS Smart Table when dealing with live data streams

Encountering an issue while trying to initiate a fresh React Native Project

Employing AJAX to send form data to a pair of destinations