Enforce timezone for angular.js application

Question

I'd like to use one single timezone for an angular.js application. I'm aware that angular.js currently uses browsers timezone settings for date formatting, but I'd like to override this setting so that I can enforce a specific timezone for a user so that it doesn't depend on a browser settings.

It is a business application in question so there is no need for user specific timezones. Everything happens in a company's specified timezone and this is why I'd like to enforce it for every user. Data is saved in UTC, but it needs to be shown in company timezone for every user without depending on user location/locale/browser settings.

Is there any way I can accomplish this that anyone is aware of? And if there is, it'd be greatly appreciated to point me to correct way to do it :) So far I've had zero luck with it.

score 2 · Answer 1 · answered Sep 01 '14 at 09:24

2

You can use a library such as timezone.js, or moment.js. I've used timezone successfully, and I've heard moment.js works pretty well. You'll likely want to make an injectable factory..

angular.module('date', [])
.config(function () {
    timezoneJS.timezone.zoneFileBasePath = '/tz';
    timezoneJS.timezone.init();
})
.service('dateConverter', function () {
    return {
        toDisplayDate: function (utcDateIn) {
            return new timezoneJS.Date(utcDateIn, 'America/Los_Angeles')
        }
    }
});

That's just off the top of my head, but it's an example of what you'll probably have to do - convert dates from native JS to the library dates.

answered Sep 01 '14 at 09:24

Stephen

5,362
1
22
33

Thanks for your comment! Isn't that the case that I need to separately call "toDisplayDate(utcDateIn)" method when I want to format a date to specified timezone? What I'm first and foremost looking for is a solution where I could set the timezone application wide and enforce angular to format dates to that given timezone every time they're displayed anywhere. – veturi Sep 01 '14 at 10:05
It's not about formatting a date to a timezeone. It's about turning a date object into another type of date. For example, when you get some data from the server you would run your dates through that method rather than calling `new Date(...)`. Then you can use that other date object for things like the date_format filter. Either way though, you'll never really be able to do something application-wide that just magically works.. that one is a pipe dream :) – Stephen Sep 01 '14 at 19:14

score 1 · Accepted Answer · edited May 23 '17 at 11:49

Sorry, but it's not possible to change the time zone behavior of the JavaScript Date object. It will always use the time zone of the computer that it's running on.

The best you can do is work around it with one of the libraries listed here. Stephen's answer shows how you can integrate one of them in to Angular.

Also, I'd consider very carefully when you say "there is no need for user specific timezones". Sometimes, that is the case, but very rarely. Often, companies have locations in multiple time zones, or they have employees that travel, or they interact with customers or partners that are in different time zones.

Besides, if what you say is true - that users are always in the single time zone of the company, then wouldn't that already be the local time zone for their computer? If so, then there's not much to do.

If you have users in other time zones, but you wish them to use the company's primary time zone, then that would be a case that would require one of these libraries. But consider carefully the impact of that. Depending on how far away a user is, even their current date might be different than the company's date.

Yeah, you're right. Thanks for your input. I'll approve this as the accepted answer since it kinda answers the question "can javascript date object behavior be changed". I ended up with implementing moment.js to my application as Stephen pointed out, so kudos for that great answer! Thanks guys! — veturi, Sep 02 '14 at 11:45
You might also be interested in [these third-party angular directives for moment](https://github.com/urish/angular-moment). — Matt Johnson-Pint, Sep 02 '14 at 14:32

Enforce timezone for angular.js application

2 Answers2