What is the best way to handle time zones with javascript

Question

I have an authenticated user with a given time zone, for example. "Berlin, GMT + 1." For the sake of this question, let me say that I have this on a global scale:

var timeZone = "Berlin"; var gmtDistance = 1; 

What is the best solution, because all date-related JS behave accordingly, which means that if I create a new Date object, it takes into account the time zone.

---

I thought it would be pretty simple, but I didn't seem to find the perfect way to do this on Google / SO. I would like to receive an answer that does not need any external library.

Answer 1

My preference is to store all server-side dates using UTC time, and when I process the data returned via AJAX calls, create a global handler that does some parsing.

In the following example, you can simply use:

 app.ajax({ url: '/My/Post/Url', data: { MyProperty: 'MyValue' }, success: function (data, status, xhr) { // Do stuff here... }, error: function (xhr, settings, error) { // Do stuff here... } }); 

But it pre-analyzes any return values ​​in the "data" element of the "success" function, fixing the dates for UTC in the local time zone. Keep in mind - after that, if you continue processing the data, you will need to fix it before sending it back to the server, or you will send it back with an offset.

 var app = window.app = $.extend(true, {}, app, { // Creating a namespace for my app which is safe across multiple files. ajax: function (options) { var defaultSettings = { type: 'POST', async: true }; // Capture the settings. var settings = $.extend(true, {}, defaultSettings, options); // Install our general handlers; if (settings.success) { settings.success = function (data, textStatus, jqXHR) { app.OnPostSuccess(data, textStatus, jqXHR, options.success); } } else settings.success = app.OnPostSuccess; if (settings.error) { settings.error = function (jqXHR, ajaxSettings, thrownError) { app.OnPostError(event, jqXHR, ajaxSettings, thrownError, options.error); } } else settings.error = app.OnPostError; $.ajax(settings); }, OnPostSuccess: function (data, textStatus, jqXHR, fn_after) { // Do my generalized success handling here. // Fix Dates. var fixedData = app.FixDate(data); // Call any other handler that been specified. if (typeof fn_after === 'function') fn_after(fixedData, textStatus, jqXHR); }, OnPostError: function (jqXHR, ajaxSettings, thrownError, fn_after) { // Do my generalized error handling here. // Call any other handler that been specified. if (typeof fn_after === 'function') fn_after(jqXHR, ajaxSettings, thrownError); }, FixDate: function (obj) { var fixed = obj; if (typeof obj == 'string' && obj.indexOf('\/Date(') == 0) { // Microsoft date "/Date(12345678)/" - convert to real date. fixed = new Date(parseInt(fixed.substr(6, fixed.length - 8), 10)); } if (typeof fixed === 'object') { if (fixed.getTimezoneOffset) { // If the value is a date, apply timezone correction. var now = new Date(); var offset = now.getTimezoneOffset(); // # of minutes from GMT. fixed = new Date(fixed.getTime() + offset * 60000); // This updates the value based on the offset. } else { // Otherwise, update each of its properties. // This fixes objects with dates for properties, recursively. $.each(fixed, function (index, value) { fixed[index] = app.FixDate(value); }); } } return fixed; } }); 

All this setup for this. If you now process things like dates in OnPostSuccess, you can ensure that they are always in the correct format - and always in the right time zone.

Do you use the above AJAX methods , you can use the FixDate method as follows:

 var MyObj = { MyDate: "\/Date(12345678)\/" }; console.log('Before: ', MyObj.MyDate); MyObj = app.FixDate(MyObj); console.log('After: ', MyObj.MyDate); 

To see an example in action, check out the following jsFiddle:

http://jsfiddle.net/TroyAlford/TBNVV/

Note: this also includes AJAX bits, but they are not used in the example — for completeness only.

Answer 2

How about this?

http://www.onlineaspect.com/2007/06/08/auto-detect-a-time-zone-with-javascript/

 var rightNow = new Date(); var jan1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0); var temp = jan1.toGMTString(); var jan2 = new Date(temp.substring(0, temp.lastIndexOf(" ")-1)); var std_time_offset = (jan1 - jan2) / (1000 * 60 * 60); 

Answer 3

perhaps the dojo toolkit may give you some ideas about this [because you do not want to have an external library;)]

Dojo Toolkit comes with a good class for handling date and time and with full localization support, even with timezone support. http://dojotoolkit.org/api/1.6/dojo/date