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

Mongooses do not clutter the array with unnecessary lines

Exploring Node.js Express: Understanding the Difference Between Modules and Middleware

Merging an assortment of items based on specific criteria

Issues have been reported with the functionality of the ng-click function in Angular JS

Indentation differences between PHP and JavaScript

Mask the "null" data in JSON

Unlimited Caching: A Guide to Storing HTTP Responses permanently

ng-model in html input with a name of "foo[]"

Exporting JSON data to an Excel file using an array of objects with embedded arrays

Utilize button element with both href and onClick attributes simultaneously

Creating HTML code from a website by utilizing XML

Using axios to make a request from a server to itself

Transferring information to a partial view using a jQuery click event

Storing JSON data from a Github Gist in an array using the AJAX method - a step-by-step guide

What steps can be taken to obtain the fully computed HTML rather than the source HTML?

What is the proper way to implement the <slot> element within templates?

Press the Enter key to generate a new table row

Reveal and Conceal, the ever-changing show

Adding text to several elements by class in Vue.js

The API request is experiencing delays due to the large dataset of 250,000 records