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 angular-timezone-select using Bower bower install angular-timezone-select.
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.
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>