• Stars
    star
    172
  • Rank 221,201 (Top 5 %)
  • Language
    JavaScript
  • License
    Other
  • Created about 9 years ago
  • Updated almost 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐ŸŒTimezone detection for JavaScript

JSTZ

Circle CI JSTZ on NPM

Timezone detection for JavaScript

What

This library allows you to detect a user's timezone from within their browser. It is often useful to use JSTZ in combination with a timezone parsing library such as Moment Timezone.

This library is an unofficial fork of pellepim/jstimezonedetect. The original library works well and can be used via CDN, but it was not configured to work with NPM. This meant the library was less accessible because it could not be retrieved with a simple npm command or included as a dependency in package.json. Thus this fork was born.

Sidenote: If you're wondering why this isn't an actual GitHub fork it's because the original project uses Mercurial and is hosted on BitBucket.

Why

Dealing with timezones can be a pain. Libraries like Moment Timezone help a lot with the parsing side of things, but if you want to detect the users timezone you would normally have to do it manually. That's where this library comes in.

Usage

$ npm install --save jstz

In your JS file:

import jstz from 'jstz';
const timezone = jstz.determine();
timezone.name(); // => 'America/Los_Angeles' (or whatever your user's timezone is)

Or if you prefer ES5:

var jstz = require('jstz');
var timezone = jstz.determine();
timezone.name(); // => 'America/Los_Angeles' (or whatever your user's timezone is)

Note: If you're not using a module system such as Webpack or Browserify then I recommend you use the original library delivered via CDNJS:

<!doctype html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js'></script>
<script>
  var jstz = require('jstz');
  var timezone = jstz.determine();
  console.log('Your timezone is: ' + timezone.name());
</script>

Docs

To learn more about the library head on over to the original library's repo: https://bitbucket.org/pellepim/jstimezonedetect

Use With Rails

jstz is an excellent library to use by Rails to determine the time zone of the browser (e.g. the gem browser-timezone-rails), but some extra tweaking is necessary to make them play nicely together.

A common use case is to provide a time zone select (f.time_zone_select) where it defaults to the user's current time zone. That Rails helper uses ActiveSupport::TimeZone, which provides a more human-readable subset of the time zones (e.g. Eastern Time (US & Canada) instead of America/New_York). jstz doesn't know about this subset, so we need to use the TZInfo associated with those ActiveSupport::TimeZones to have a correct translation.

This method could go on your base application controller, assuming you're setting a browser cookie browser_time_zone:

# Returns the client's time zone based on a cookie set by the browser, defaults to application time zone
def browser_time_zone
  browser_tz = ActiveSupport::TimeZone.find_tzinfo(cookies[:browser_time_zone])
  ActiveSupport::TimeZone.all.find { |zone| zone.tzinfo == browser_tz } || Time.zone
rescue TZInfo::UnknownTimezone, TZInfo::InvalidTimezoneIdentifier
  Time.zone
end

Then in the view you could do something like:

<%= f.time_zone_select :time_zone, ActiveSupport::TimeZone.us_zones,
                       default: browser_time_zone.name %>

Further complicating matters, jstz uses the forward-thinking window.Intl, which has an awareness of time zones other than what is in Rails, so time zones such as America/Montreal from Intl will not be found in Rails. If you're using jstz with Rails, you will want to tempoarily "silence" the use of Intl when reading from jstz. Here's a code snippet:

export function findTimeZone() {
  const oldIntl = window.Intl
  try {
    window.Intl = undefined
    const tz = jstz.determine().name()
    window.Intl = oldIntl
    return tz
  } catch (e) {
    // sometimes (on android) you can't override intl
    return jstz.determine().name()
  }
}

Credits (from the original README.md)

Thanks to

Other contributors: Gilmore Davidson

More Repositories

1

react-string-replace

A simple way to safely do string replacement with React components
JavaScript
605
star
2

alfred-maestro

An Alfred workflow to execute Keyboard Maestro macros.
Go
409
star
3

react-static-webpack-plugin

Build full static sites using React, React Router and Webpack (Webpack 2 supported)
JavaScript
157
star
4

react-static-boilerplate

A boilerplate for building static sites with Webpack 2, React and React Router
JavaScript
108
star
5

prompta

ChatGPT UI that is keyboard-centric, mobile friendly, can syncs chat history across devices and search past conversations.
Svelte
30
star
6

asciilib

(๏พ‰โ—•ใƒฎโ—•)๏พ‰*:๏ฝฅ๏พŸโœง A library of ascii faces and kaomoji
JavaScript
18
star
7

rxjs-dash-docset

RxJS 5 documentation for Dash
JavaScript
15
star
8

browser-gopher

Search, aggregate, backup your browsing history from the command line.
Go
14
star
9

notion-utils

TypeScript
9
star
10

asciilib-workflow

Quickly search through ascii faces and kaomoji (๏พ‰โ—•ใƒฎโ—•)๏พ‰*:๏ฝฅ๏พŸโœง
JavaScript
9
star
11

zazu-emoji

โšก Fast, offline emoji search for Zazu
JavaScript
8
star
12

jekyll-post

A tool for managing Jekyll from the command line
JavaScript
8
star
13

react-static-presentation

The Slide deck and examples for my React Static talk
JavaScript
8
star
14

darkly-darker-theme

A dark Chrome theme
JavaScript
7
star
15

one-dark-tab

Like OneTab, but darker.
JavaScript
7
star
16

nightmare-ava-example

JavaScript
6
star
17

webpack-base-project

A minimal Webpack project to teach you how to set up a new project
JavaScript
6
star
18

things-2do-importer

Import 2Do tasks into Things 3
Python
6
star
19

mailstring

Generate mailto strings for fun and profit. Also a React component ๐Ÿ“ค
JavaScript
5
star
20

zazu-dark-theme

๐Ÿ•ถ A simple, dark theme for Zazu
CSS
5
star
21

shirt

๐Ÿ‘• Put a shirt on that data! Simple algebraic data types
JavaScript
4
star
22

iansinnott.github.io

The blog of Ian SInnott
HTML
4
star
23

app-time

๐ŸŒŸ Build complete, wonderful, beautiful apps with one dependency. Compile to static HTML files with a single command.
JavaScript
4
star
24

google-sheets-backend

JavaScript
3
star
25

express-middleware-lecture

Source code and writeup for my lecture on Express middleware
JavaScript
3
star
26

stylite

๐ŸŽจ A super lightweight style editor. Apply any styles you want to any site.
JavaScript
3
star
27

chinese-common-wordlist-pleco-decks

JavaScript
2
star
28

real-time-stack

JavaScript
2
star
29

imessage-backup-helpers

JavaScript
2
star
30

react-boilerplate

React + Webpack + Hot Reloading ๐ŸŽ‰
JavaScript
2
star
31

bitbucket-cli

A CLI for BitBucket
JavaScript
2
star
32

asciilib-site

The website for asciilib
TypeScript
2
star
33

slush-express-isinn

Generate Express apps with Slush.
CSS
1
star
34

markdown-to-csv

JavaScript
1
star
35

emoji-annotations

JavaScript
1
star
36

character-frequency-workflow

JavaScript
1
star
37

gatsby-notion

TypeScript
1
star
38

url-spider

TypeScript
1
star
39

jquery-ui-dropdown

A simple dropdown widget for jQuery UI
JavaScript
1
star
40

trimstring

๐Ÿ”ช Neatly trim template strings
JavaScript
1
star
41

mini-redux

A simple imitation of Redux implemented in a single React component
JavaScript
1
star
42

sqlite-syncta

Experimenting with syncing sqlite databases
Go
1
star
43

eslint-config-zen

An ESLint config for use with the latest ESNext features, React and Flow
JavaScript
1
star
44

electron-auto-update

TypeScript
1
star
45

addr.fyi

JavaScript
1
star
46

how-the-web-works

An over simplified explanation of how the web works
JavaScript
1
star
47

history-to-finda

Clojure
1
star
48

notedown

A note-taking app...
JavaScript
1
star
49

record-video

An example of recording on mobile with the front-facing camera.
TypeScript
1
star
50

baby-lisp-interpreter

Clojure
1
star
51

try-instantdb

Trying out InstantDB
TypeScript
1
star
52

next-tailwind-typescript-starter

TypeScript
1
star
53

authguardian-react-starter

JavaScript
1
star
54

lab.iansinnott.com

๐Ÿ”ฌ Where I run experiments and learn by doing
JavaScript
1
star