How can I output long datetime format which includes timzone with moment-timezone and react-intl?

Question

I have some client code which is using react-intl to display currency, language, and date time values in a the user's defined language and region (culture/locale). In addition to these requirements I want to show the timezone abbreviation when using a long date and time format (ex. 8 February 2016, 15:02 GMT).

To do this I've attempted to use the moment-timezone module which seems to do the right thing in isolation. However I've found that in my application where react-intl is used the same line of code produces the correct data but in the wrong date-time format.

document.write(moment(Date()).tz("Europe/London").format('LLL z'));

Expected: 8 February 2016 20:57 GMT

Actual: February 8, 2016 9:04 PM GMT

My guess is that this has to do with the fact that I'm not loading in the moment en-US local directly since moment is being loaded in automatically for me as part of the react-intl library using the following type of code.

addLocaleData(en);

var intlData = {
    "locales": ["en-US", "en-GB"],
    "formats": {
        "date": {
            "short": {
                "day": "numeric",
                "month": "long",
                "year": "numeric"
            },
            "longdatetime": {
                "day": "numeric",
                "month": "long",
                "year": "numeric",
                "hour": "numeric", 
                "minute": "numeric"
            }
        },
        "time": {
            "hhmm": {
                "hour": "numeric",
                "minute": "numeric"
            }
        }
    }
};


const provider = <IntlProvider locale="en-GB" {...intlData}><MyApp /></IntlProvider>;

Related:

• https://github.com/andyearnshaw/Intl.js/issues/19
• https://github.com/yahoo/react-intl/issues/49

Answer 1

As a temporary workaround I found that I can specifically set the locale for moment-timezone like so.

import moment from 'moment-timezone'

moment.locale('en-GB');