将JavaScript日期从一个时区转换为另一个时区？

Question

I'm receiving a date from the server in a string format (ISO 8601) with timezone specification, eg: 2014-12-14T21:00:00+0300 .

I need to convert it to a standard JavaScript Date object in the specific timezone, eg Europe/Moscow with regards to DST and such.

I've tried to use Moment.js with Moment Timezone to achieve this, but to no avail.

Example

var date = '2014-12-14T21:00:00+0300';
var timezone = 'Europe/Moscow';

var momentDate = moment.tz(date, timezone);
var jsDate = momentDate.toDate();

console.log(
    date,
    momentDate.format('DD.MM.YYYY HH:mm:ss ZZ'),
    jsDate
);

The jsDate is still in the local timezone of the browser (OS).

How do I cast JavaScript Date object to another timezone?

Answer 1

Timezones are merely a presentation issue.

The Date object will always be in UTC, but your browser will typically adjust the output when you convert it to a string into the local timezone.

If you wish to present the variable jsDate as a string represented in a different timezone then you must also use something like moment to perform that conversion.

Answer 2

As @Alnitak said this is a strictly presentation problem. All JavaScript dates are internally stored in the UTC format and manipulated in the local timezone of the browser (OS). The only place where target timezone is coming into action is when you converting Date object to a string in order to show it to a user. All dates will be formatted according to a local timezone of the each individual user.

However, if you want to format dates in some specific timezone (for example when your users are in the New York and you want to show dates in Moscow) you will have to use more advanced formatting utilities like Moment.js and Moment Timezone .

When you control all the date formatting in your application - that can be easily implemented. However, when you need to relay this functionality to some third-party component that doesn't care about timezones and such (like some DatePicker component) it can become pretty ugly.

The only practical solution I've found to overcome this issue is to create a standard Date object that is pretending to be in local timezone of the user. Here's the function, that you can use:

/**
 * Returns standard Date from Moment.js date as if it was in local timezone.
 * Use getMoment() method of the result to get proper Moment.js date back.
 *
 * @param {object} momentDate
 *
 * @returns {Date}
 */
function momentAsLocalDate(momentDate) {

    var origOffset = momentDate.format('ZZ');
    var localOffset = moment().format('ZZ');

    // Creating a standard date as if date was in current browser TZ.
    var stdDate = new Date(
        // Creating date from ISO:8601 format.
        momentDate.format('YYYY-MM-DDTHH:mm:ss') + localOffset
    );

    stdDate.getMoment = function() {

        function pad(number) {
            if (number < 10) {
                return '0' + number;
            }
            return number;
        }

        // String in ISO:8601 format.
        var dateString =
            this.getFullYear() +
            '-' + pad(this.getMonth() + 1) +
            '-' + pad(this.getDate())      +
            'T' + pad(this.getHours())     +
            ':' + pad(this.getMinutes())   +
            ':' + pad(this.getSeconds())   +
            origOffset
        ;

        // Creating a new moment from date string.
        var momentDate = moment(dateString);

        // Setting original timezone.
        momentDate.zone(origOffset);

        return momentDate;
    };

    return stdDate;
}

The usage of this function can be demonstrated with the following simple test:

/**
 * A stupid third-party component that doesn't care about timezones.
 *
 * @param {Date} inputDate
 */
var thirdPartyComponent = function(inputDate) {

    // Showing date to a user.
    console.log('Here is the date: ' + inputDate);

    // Changing the date.
    inputDate.setHours(17, 30);

};

var momentDate = moment('2014-12-14T21:00:00+03:00').zone('+03:00');

console.log('Original Moment Date', momentDate.format());

var stdDate = momentAsLocalDate(momentDate);

console.log('Converted Local Date', stdDate);

thirdPartyComponent(stdDate);

console.log('Changed Local Date', stdDate);

console.log('Converted Moment Date', stdDate.getMoment().format());

You will get the following result in the console:

Original Moment Date 2014-12-14T21:00:00+03:00
Converted Local Date Sun Dec 14 2014 21:00:00 GMT-0500 (EST)
Here is the date: Sun Dec 14 2014 21:00:00 GMT-0500 (EST)
Changed Local Date Sun Dec 14 2014 17:30:00 GMT-0500 (EST)
Converted Moment Date 2014-12-14T17:30:00+03:00

I would highly recommend not to use this approach in practice if you can do so. The better course of action is to rewrite the component to support timezones or to switch to a better component. However, if there is no other options, use it very carefully and at your own risk.

If there are better solutions, or this example can be improved - please let me know.

Cheers!