Formatting does not work on timezone abbreviation.

[MikeRomaa]

I am trying to display a timestamp to the user in the format 16:00 EST using the following code segment:

import React from 'react'
import Moment from 'react-moment'
import 'moment-timezone'

export default class MyComponent extends React.Component {
    render() {
        return (
            const timestamp = '2021-01-03T21:00:00Z'
            <Moment local format="HH:mm z">{timestamp}</Moment>
        )
    }
}

However, instead of 16:00 EST I am just getting 16:00.

I have tried this same formatting string on regular JavaScript moment and it worked perfectly fine.

[headzoo]

I did a little bit of digging and it appears the "z" and "zz" format options are deprecated. See moment/moment#162

Base on the suggestions in that thread "z" works for me when I import "moment-timezone", and I either set Moment.globalTimezone or add the tz attribute to Moment. For example:

<Moment local format="HH:mm z" tz="America/New_York">{timestamp}</Moment>

Or

Moment.globalTimezone = 'America/New_York';

<Moment local format="HH:mm z">{timestamp}</Moment>

[MikeRomaa]

Ahh I see, the inclusion of tz did fix it, thank you so much for the insight! What I ended up doing is using tz.guess() instead of just displaying all times in Eastern time 😛:

import React from 'react'
import Moment from 'react-moment'
import moment from 'moment/moment'
import 'moment-timezone'

export default class MyComponent extends React.Component {
    render() {
        return (
            const timestamp = '2021-01-03T21:00:00Z'
            <Moment local format="HH:mm z" tz={moment.tz.guess()}>{timestamp}</Moment>
        )
    }
}