Timezone select for AngularJS

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>