How to JSON stringify a javascript Date and preserve timezone
Solution 1
Assuming you have some kind of object that contains a Date
:
var o = { d : new Date() };
You can override the toJSON
function of the Date
prototype. Here I use moment.js to create a moment
object from the date, then use moment's format
function without parameters, which emits the ISO8601 extended format including the offset.
Date.prototype.toJSON = function(){ return moment(this).format(); }
Now when you serialize the object, it will use the date format you asked for:
var json = JSON.stringify(o); // '{"d":"2015-06-28T13:51:13-07:00"}'
Of course, that will affect all Date
objects. If you want to change the behavior of only the specific date object, you can override just that particular object's toJSON
function, like this:
o.d.toJSON = function(){ return moment(this).format(); }
Solution 2
I'd always be inclined to not mess with functions in the prototype of system objects like the date, you never know when that's going to bite you in some unexpected way later on in your code.
Instead, the JSON.stringify method accepts a "replacer" function (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#The_replacer_parameter) which you can supply, allowing you to override the innards of how JSON.stringify performs its "stringification"; so you could do something like this;
var replacer = function(key, value) {
if (this[key] instanceof Date) {
return this[key].toUTCString();
}
return value;
}
console.log(JSON.stringify(new Date(), replacer));
console.log(JSON.stringify({ myProperty: new Date()}, replacer));
console.log(JSON.stringify({ myProperty: new Date(), notADate: "I'm really not", trueOrFalse: true}, replacer));
Solution 3
Based on Matt Johnsons 's answer, I re-implemented toJSON
without having to depend on moment
(which I think is a splendid library, but a dependency in such a low level method like toJSON
bothers me).
Date.prototype.toJSON = function () {
var timezoneOffsetInHours = -(this.getTimezoneOffset() / 60); //UTC minus local time
var sign = timezoneOffsetInHours >= 0 ? '+' : '-';
var leadingZero = (Math.abs(timezoneOffsetInHours) < 10) ? '0' : '';
//It's a bit unfortunate that we need to construct a new Date instance
//(we don't want _this_ Date instance to be modified)
var correctedDate = new Date(this.getFullYear(), this.getMonth(),
this.getDate(), this.getHours(), this.getMinutes(), this.getSeconds(),
this.getMilliseconds());
correctedDate.setHours(this.getHours() + timezoneOffsetInHours);
var iso = correctedDate.toISOString().replace('Z', '');
return iso + sign + leadingZero + Math.abs(timezoneOffsetInHours).toString() + ':00';
}
The setHours
method will adjust other parts of the date object when the provided value would "overflow". From MDN:
If a parameter you specify is outside of the expected range, setHours() attempts to update the date information in the Date object accordingly. For example, if you use 100 for secondsValue, the minutes will be incremented by 1 (minutesValue + 1), and 40 will be used for seconds.
Solution 4
When I stringify it, though, the timezone goes bye-bye
That’s because Tue Jun 07 2011 04:00:00 GMT+1000 (E. Australia Standard Time)
is actually the result of the toString
method of the Date
object, whereas stringify
seems to call the toISOString
method instead.
So if the toString
format is what you want, then simply stringify that:
JSON.stringify(date.toString());
Or, since you want to stringify your “command” later on, put that value in there in the first place:
var command = { time: date.toString(), contents: 'foo' };
Related videos on Youtube
XwipeoutX
Updated on July 08, 2022Comments
-
XwipeoutX almost 2 years
I have a date object that's created by the user, with the timezone filled in by the browser, like so:
var date = new Date(2011, 05, 07, 04, 0, 0); > Tue Jun 07 2011 04:00:00 GMT+1000 (E. Australia Standard Time)
When I stringify it, though, the timezone goes bye-bye
JSON.stringify(date); > "2011-06-06T18:00:00.000Z"
The best way I can get a ISO8601 string while preserving the browser's timezone is by using moment.js and using
moment.format()
, but of course that won't work if I'm serializing a whole command via something that usesJSON.stringify
internally (in this case, AngularJS)var command = { time: date, contents: 'foo' }; $http.post('/Notes/Add', command);
For completeness, my domain does need both the local time and the offset.
-
XwipeoutX almost 9 yearsI get that I can just do it myself, but I'm after a way of doing it with an existing object. It's pretty dodgy having to translate the whole object when I just want to specify how one part serializes.
-
James almost 9 yearsYou can
date.toJSON = function () { return this.toString(); }
to specify how you want to stringify just this 'date' of your whole object. -
Matt Johnson-Pint almost 9 years
toString
might have the offset, but it's not in ISO format. -
Kamyar Ghasemlou over 8 yearsThanks for the hint about overriding the toJSON method, that indeed solved my problem. but is there any safe way of doing it? I mean if I override it, It will be overridden everywhere, and it will mess .stringify elsewhere if I were using it.
-
Matt Johnson-Pint over 8 years@KamyarGhasemlou - Updated the question to show one way. You can change a single
Date
object instance'stoJSON
function instead. -
Kamyar Ghasemlou over 8 yearsThanks for the reply and quick addition. I should have thought about overriding method for a specific object, very clever. :)
-
Jonathan Wilson over 7 yearsPerhaps it would be better to allow for minutes in the timezone offset. ie.
var offsetMinutes = this.getTimezoneOffset() % 60
-
Jonathan Wilson over 7 yearsI think I would use a solution like this if I didn't already have moment js as a dependency
-
bvgheluwe over 7 years@JonathanWilson: I'm unsure why you would need the remaining minutes. Afaik, a timezone offset is always a whole number of hours.
-
Jonathan Wilson over 7 yearsyou are correct that it usually is whole hours but I know for a fact that there are timezone offsets with minutes too. Nepal, for example is +05:45. I think it's a good idea when posting a general solution about time and timezones, to make it as robust as possible.
-
bvgheluwe over 7 years@Endless, as per your demands, I removed
: string
(three places) and: Date
(one place). Now it's plain javascript. -
statler almost 6 yearsFurther to @JonathanWilson: Australia has non-hour based timezones as well
-
Polv about 4 yearsI just realized that I cannot mess with
value
as well. Have to usethis[key]
. -
Nenad Vichentikj about 4 yearsSaved a good night sleep :) I was stuck on this for quite some while. Just import and override it in the module.js (angular 2+)
-
Shawson almost 3 years@Polv yea it's not the most intuitive!
-
Grimace of Despair almost 3 yearsTo save others the same struggle: replacer is called recursively, where
this
is the current node of the object,key
the property being converted, andvalue
a pre-transformed property value, being a string when original was a Date. Hence:this[key]
, which gives you a Date rather thanvalue
, which gives you a string. -
Fappaz over 2 yearsBrilliant, thanks so much for this (no pun intended). It's worth it pointing out though that
this[key]
won't work in arrow functions.