Timezone select for AngularJS

Note Only supports up to AngularJS 1.5.x, see this issue.

A simple AngularJS directive to create timezone select. It uses select2 to create auto-complete timezone select. Timezone information comes from moment. Countries timezone data comes from TimezoneDB.

In the dropdown, timezones are divided into three groups:

• UTC - UTC is a common option for most users.
• Common - Timezones for a country
• Other - Other timezones

If the user has already selected the country, timezones for the country will be listed first, which makes easier for user to select.

Install

Install angular-timezone-select using Bower bower install angular-timezone-select.

Usage

Make your Angular module depend on module angular-timezone-select.

angular.module('timezoneSelectExample', ['angular-timezone-select']);

Then use directive timezone-select.

<select timezone-select data-ng-model="timezone" data-country="country"></select>

Attribute country can be used to bind user's selected country. Value of selected country should be the ISO 3166-1 alpha-2 code, e.g. CN, US.

See example.html for a simple example.

Translations

You can provide different Translations for timezone groups. See table below.

Attribute	Default value
i18n-utc	UTC
i18n-common	Common
i18n-other	Other

For example,

<select timezone-select data-ng-model="timezone" data-country="country" data-i18n-common="Common Timezones"></select>