Display time in timezone input without converting to user's timezone

Question

I need to display times in many timezones on a web page. The service givess me the times in ISO8601 format with proper offsets:

"ScheduleTimes": {
    "ScheduledDepartureTime": "2017-03-14T21:55:00.000-07:00",
    "ScheduledArrivalTime": "2017-03-16T06:50:00.000+11:00"
}

Now, when I display this (departure time) time I need to display it as "14MAR 2155" regardless of where the user is and what to locale and timezone the browser is set.

Standard Javascript date() converts to browser-local time. Moment.js and its friends (e.g. react-moment) will do timezone conversion, but, I need to know the timezone.

e.g.

<Moment format="HHmm">2017-03-14T21:55:00.000-07:00</Moment>

Converts that to the hours/min to your local time. I can give it a timezone but I have to fetch the timezone for a given airport code. I have dozens in any one given display, so I don't really want to do that. (I only have the offset, and the airport, and a huge list of arriving and departing flights so I'm not converting them all one by one).

Normally in the operations control centre this isn't an issue for me: the default timezone is always UTC. This is outside the OCC and for a different audience that will expect port-local times. It is not expected by the audience that departure/arrival times would be converted to their own timezone if the other "end" of the journey is in a port in a different timezone.

Other than writing a custom class that parses my dates/times specifically, are there any solutions that don't try to convert times into the browser's timezone, and don't need to know the display timezone?

UPDATE

Based on the accepted answer below I created a React component that allows me to also use it in other places where I need a different display format:

const moment = require('moment');

class LocalTime extends Component {
    formatLocalTime() {
        const t = this.props['value'];
        const f = this.props['format'];
        if (t && f) {
            return moment.utc(t.substring(0, 23)).format(f).toUpperCase();
        } 
        return "";
    }

    render() {
        const formatLocalTime = this.formatLocalTime();
        return (
            <time>{formatLocalTime}</time>
        );
    }
}

So this works as follows, with 'value' and 'format' properties, I can display STD and ETD in different formats in the port-local time:

<LocalTime value="2017-03-14T21:55:00.000-07:00" format="DDMMM HH:mm"/>
<LocalTime value="2017-03-14T22:05:00.000-07:00" format="HHmm"/>

robertklep · Accepted Answer · 2017-03-14 14:25:44Z

1

Quick and somewhat dirty:

const moment = require('moment');

let departure = '2017-03-14T21:55:00.000-07:00';
let arrival   = '2017-03-16T06:50:00.000+11:00';

function format(t) {
  return moment.utc(t.substring(0, 23)).format('DDMMM HH:mm').toUpperCase();
}

console.log('Departure:', format(departure));
console.log('Arrival  :', format(arrival));

// Outputs:
// Departure: 14MAR 21:55
// Arrival  : 16MAR 06:50

It strips the timezone offsets from the string, tells Moment to use the remainder as a UTC timestamp (so it doesn't convert to local), and formats it.

answered Mar 14, 2017 at 14:25

robertklep

205k38 gold badges421 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

scot Over a year ago

Thanks Robert: I'll see if I can apply this solution. Quick and Dirty can sometimes win the day!

hazardous · Accepted Answer · 2017-03-14 13:48:54Z

1

Check out timezonecomplete library. It doesn't seem to auto-apply the client timezone to the format method.

answered Mar 14, 2017 at 13:48

hazardous

10.8k2 gold badges44 silver badges55 bronze badges

1 Comment

scot Over a year ago

Thank you, I will have a look at that library over the next couple of weeks.

Collectives™ on Stack Overflow

Display time in timezone input without converting to user's timezone

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related