JSON Stringify changes time of date because of UTC

Question

My date objects in JavaScript are always represented by UTC +2 because of where I am located. Hence like this

Mon Sep 28 10:00:00 UTC+0200 2009

Problem is doing a JSON.stringify converts the above date to

2009-09-28T08:00:00Z  (notice 2 hours missing i.e. 8 instead of 10)

What I need is for the date and time to be honoured but it's not, hence it should be

2009-09-28T10:00:00Z  (this is how it should be)

Basically I use this:

var jsonData = JSON.stringify(jsonObject);

I tried passing a replacer parameter (second parameter on stringify) but the problem is that the value has already been processed.

I also tried using toString() and toUTCString() on the date object, but these don't give me what I want either..

Can anyone help me?

user_3580357 · Answer

Out-of-the-box solution to force JSON.stringify ignore timezones:

Pure javascript (based on Anatoliy answer):

// Before: JSON.stringify apply timezone offset
const date =  new Date();
let string = JSON.stringify(date);
console.log(string);

// After: JSON.stringify keeps date as-is!
Date.prototype.toJSON = function(){
    const hoursDiff = this.getHours() - this.getTimezoneOffset() / 60;
    this.setHours(hoursDiff);
    return this.toISOString();
};
string = JSON.stringify(date);
console.log(string);

Using moment + moment-timezone libraries:

const date =  new Date();
let string = JSON.stringify(date);
console.log(string);

Date.prototype.toJSON = function(){
    return moment(this).format("YYYY-MM-DDTHH:mm:ss:ms");;
};
string = JSON.stringify(date);
console.log(string);

user_4676371 · Answer

you can use moment.js to format with local time:

Date.prototype.toISOString = function () {
    return moment(this).format("YYYY-MM-DDTHH:mm:ss");
};

user_11279581 · Answer

I run into this a bit working with legacy stuff where they only work on east coast US and don't store dates in UTC, it's all EST. I have to filter on the dates based on user input in the browser so must pass the date in local time in JSON format.

Just to elaborate on this solution already posted - this is what I use:

// Could be picked by user in date picker - local JS date
date = new Date();

// Create new Date from milliseconds of user input date (date.getTime() returns milliseconds)
// Subtract milliseconds that will be offset by toJSON before calling it
new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toJSON();

So my understanding is this will go ahead and subtract time (in milliseconds (hence 60000) from the starting date based on the timezone offset (returns minutes) - in anticipation for the addition of time toJSON() is going to add.

user_4783719 · Answer

JavaScript normally convert local timezone to UTC .

date = new Date();
date.setMinutes(date.getMinutes()-date.getTimezoneOffset())
JSON.stringify(date)

user_9942276 · Answer

Here is something really neat and simple (atleast I believe so :)) and requires no manipulation of date to be cloned or overloading any of browser's native functions like toJSON (reference: How to JSON stringify a javascript Date and preserve timezone, courtsy Shawson)

Pass a replacer function to JSON.stringify that stringifies stuff to your heart's content!!! This way you don't have to do hour and minute diffs or any other manipulations.

I have put in console.logs to see intermediate results so it is clear what is going on and how recursion is working. That reveals something worthy of notice: value param to replacer is already converted to ISO date format :). Use this[key] to work with original data.

var replacer = function(key, value)
{
    var returnVal = value;
    if(this[key] instanceof Date)
    {
        console.log("replacer called with key - ", key, " value - ", value, this[key]); 

        returnVal = this[key].toString();

        /* Above line does not strictly speaking clone the date as in the cloned object 
         * it is a string in same format as the original but not a Date object. I tried 
         * multiple things but was unable to cause a Date object being created in the 
         * clone. 
         * Please Heeeeelp someone here!

        returnVal = new Date(JSON.parse(JSON.stringify(this[key])));   //OR
        returnVal = new Date(this[key]);   //OR
        returnVal = this[key];   //careful, returning original obj so may have potential side effect

*/
    }
    console.log("returning value: ", returnVal);

    /* if undefined is returned, the key is not at all added to the new object(i.e. clone), 
     * so return null. null !== undefined but both are falsy and can be used as such*/
    return this[key] === undefined ? null : returnVal;
};

ab = {prop1: "p1", prop2: [1, "str2", {p1: "p1inner", p2: undefined, p3: null, p4date: new Date()}]};
var abstr = JSON.stringify(ab, replacer);
var abcloned = JSON.parse(abstr);
console.log("ab is: ", ab);
console.log("abcloned is: ", abcloned);

/* abcloned is:
 * {
  "prop1": "p1",
  "prop2": [
    1,
    "str2",
    {
      "p1": "p1inner",
      "p2": null,
      "p3": null,
      "p4date": "Tue Jun 11 2019 18:47:50 GMT+0530 (India Standard Time)"
    }
  ]
}
Note p4date is string not Date object but format and timezone are completely preserved.
*/

user_5429511 · Answer

I ran into the same problem. The way I resolvet it was:

  var currentTime = new Date();

  Console.log(currentTime); //Return: Wed Sep 15 13:52:09 GMT-05:00 2021
  Console.log(JSON.stringify(currentTime));  //Return: "2021-09-15T18:52:09.891Z"

var currentTimeFixed = new Date(currentTime.setHours(currentTime.getHours() - (currentTime.getUTCHours() - currentTime.getHours())));

  Console.log(JSON.stringify(currentTimeFixed)); //Return:  "2021-09-15T13:52:09.891Z"

user_7094918 · Answer

I tried this in angular 8 :

create Model :

export class Model { YourDate: string | Date; }

in your component

model : Model;
model.YourDate = new Date();

send Date to your API for saving
When loading your data from API you will make this :

model.YourDate = new Date(model.YourDate+"Z");

you will get your date correctly with your time zone.

user_12366580 · Answer

In this case I think you need transform the date to UNIX timestamp

timestamp = testDate.getTime();
strJson = JSON.stringify(timestamp);

After that you can re use it to create a date object and format it. Example with javascript and toLocaleDateString ( https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/toLocaleDateString )

newDateObject = new Date(JSON.parse(strJson));
newDateObject = newDateObject.toLocalDateStrin([
  "fr-FR",
]);

If you use stringify to use AJAX, now it's not useful. You just need to send timestamp and get it in your script:

$newDateObject = new \DateTime();
$newDateObject->setTimestamp(round($timestamp/1000));

Be aware that getTime() will return a time in milliseconds and the PHP function setTimestamp take time in seconds. It's why you need to divide by 1000 and round.

user_6638642 · Answer

I wrote the following code blog where it makes service calls.. it will try to serializable the json in every post submission, it will format to local date it again.

protected async post(endPoint: string, data, panelName?: string, hasSuccessMessage: boolean = false): Promise> {
            const options = this.InitHeader(true);
            const url: string = this._baseUrl + endPoint;
    
            Date.prototype.toJSON = function () {
                return moment(this).format("YYYY-MM-DDThh:mm:00.000Z");;
            };
    
            return await this._http.post(url, data, options).pipe(map(response => {
                return this.Map(response, null);
            }));
        }

user_4037504 · Answer

In Angular place the following in index.js script section:

setTimeout(function (){
    Date.prototype.toJSON = function(){
    return new Date(this).toLocaleDateString("en-US") + " "+new Date(this).toLocaleTimeString();
}},1000);

JSON Stringify changes time of date because of UTC

20 Answers