Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get timezone from users browser using moment(timezone).js

What is the best way to get client's timezone and convert it to some other timezone when using moment.js and moment-timezone.js

I want to find out what is clients timezone and later convert his date and time into some other timezone.

Does anybody has experience with this?

like image 435
nemo_87 Avatar asked Nov 03 '16 12:11

nemo_87


People also ask

How do I get my browser time zone in moment?

var tz = moment. tz. guess(); It will return an IANA time zone identifier, such as America/Los_Angeles for the US Pacific time zone.

How do you get timezone from moment date?

You can use moment.tz() to get timezone full name. It will return undefined if timezone is not set. Beside, you can use moment. format('zz') to get short timezone name.

How do I get current time zone in JavaScript?

JavaScript Date getTimezoneOffset() getTimezoneOffset() returns the difference between UTC time and local time. getTimezoneOffset() returns the difference in minutes. For example, if your time zone is GMT+2, -120 will be returned.

Which function allows you to find the user's timezone?

You can set any specific time zone using the PHP function date_default_timezone_set . This sets the specified time zone for users. Basically the users' time zone is goes to the client side, so we must use JavaScript for this.


6 Answers

When using moment.js, use:

var tz = moment.tz.guess();

It will return an IANA time zone identifier, such as America/Los_Angeles for the US Pacific time zone.

It is documented here.

Internally, it first tries to get the time zone from the browser using the following call:

Intl.DateTimeFormat().resolvedOptions().timeZone

If you are targeting only modern browsers that support this function, and you don't need Moment-Timezone for anything else, then you can just call that directly.

If Moment-Timezone doesn't get a valid result from that function, or if that function doesn't exist, then it will "guess" the time zone by testing several different dates and times against the Date object to see how it behaves. The guess is usually a good enough approximation, but not guaranteed to exactly match the time zone setting of the computer.

like image 63
Matt Johnson-Pint Avatar answered Oct 06 '22 06:10

Matt Johnson-Pint


var timedifference = new Date().getTimezoneOffset();

This returns the difference from the clients timezone from UTC time. You can then play around with it as you like.

like image 25
jogoe Avatar answered Oct 06 '22 06:10

jogoe


All current answers provide the offset differece at current time, not at a given date.

moment(date).utcOffset() returns the time difference in minutes between browser time and UTC at the date passed as argument (or today, if no date passed).

Here's a function to parse correct offset at the picked date:

function getUtcOffset(date) {
  return moment(date)
    .subtract(
      moment(date).utcOffset(), 
      'minutes')
    .utc()
}
like image 39
tao Avatar answered Oct 06 '22 07:10

tao


Using Moment library, see their website -> https://momentjs.com/timezone/docs/#/using-timezones/converting-to-zone/

i notice they also user their own library in their website, so you can have a try using the browser console before installing it

moment().tz(String);

The moment#tz mutator will change the time zone and update the offset.

moment("2013-11-18").tz("America/Toronto").format('Z'); // -05:00
moment("2013-11-18").tz("Europe/Berlin").format('Z');   // +01:00

This information is used consistently in other operations, like calculating the start of the day.

var m = moment.tz("2013-11-18 11:55", "America/Toronto");
m.format();                     // 2013-11-18T11:55:00-05:00
m.startOf("day").format();      // 2013-11-18T00:00:00-05:00
m.tz("Europe/Berlin").format(); // 2013-11-18T06:00:00+01:00
m.startOf("day").format();      // 2013-11-18T00:00:00+01:00

Without an argument, moment#tz returns:

    the time zone name assigned to the moment instance or
    undefined if a time zone has not been set.

var m = moment.tz("2013-11-18 11:55", "America/Toronto");
m.tz();  // America/Toronto
var m = moment.tz("2013-11-18 11:55");
m.tz() === undefined;  // true
like image 35
Philippe Avatar answered Oct 06 '22 08:10

Philippe


You can also get your wanted time using the following JS code:

new Date(`${post.data.created_at} GMT+0200`)

In this example, my received dates were in GMT+0200 timezone. Instead of it can be every single timezone. And the returned data will be the date in your timezone. Hope this will help anyone to save time

like image 44
David Avatar answered Oct 06 '22 08:10

David


if the user's timezone is all you wanted then

const localtz = moment.tz.guess() // returns user's timezone

Additionally if you wanted to use it then the best way to convert a timestamp to user's timezone is

const time = moment.tz(response.timestamp)
const localtz = moment.tz.guess() // user's timezone
const date = time.clone().tz(localtz) // convert time to user's timezone

here localtz is the user's timezone and using it we can convert the timestamp to user's local time

like image 26
Nishith Avatar answered Oct 06 '22 06:10

Nishith