Updated build

README.md

@@ -28,6 +28,31 @@ Then use directive `timezone-selector`.
 <timezone-selector ng-model="timezone">
 ```
 
+## Options
+
+Options can be included as attributes in the html element.
+
+ - **sort-by** ["offset"] - This lets the list be sorted by UTC offset instead of alphabetical order.
+ - **display-utc** ["true"] - This show UTC offsets in the timezone names
+ - **show-local** ["true"] - This detects local timezone's and includes at the top. If jsTimezoneDetect is installed if will include the detected timezone otherwise it fallback on moment js and list all timezones with the same browsers UTC offset.
+ - **primary-choices** ["space seperated timezone names"] - This lets you put important timezone's at the top of the list or include extra aliases. Use names from momentjs-timezone, which you can list with the command: `moment.tz.names;`.
+
+An example of using the options is below:
+
+```html
+<timezone-selector
+    ng-model="timezone"
+    display-utc="true"
+    sort-by="offset"
+    show-local="true"
+    primary-choices="UTC GB WET GMT Asia/Macau"
+></timezone-selector>
+```
+
+## Screenshot
+The screenshot below show angular-selector in action with all options enabled:
+<img src="./images/primary_local_selection.png" alt-text="Angular-selector in action with all options enabled"></img>
+
 # Attributions
 Inspired by [angular-timezone-select](https://github.com/alexcheng1982/angular-timezone-select) from [alexcheng1982](https://github.com/alexcheng1982).
 

angular-timezone-selector.js

@@ -16,10 +16,12 @@ angular.module('angular-timezone-selector', [])
   .factory('timezones', ['_', 'moment', function (_, moment) {
     var timezoneMap = {}
     _.forEach(moment.tz.names(), function (zoneName) {
+      var tz=moment.tz(zoneName);
       timezoneMap[zoneName] = {
         id: zoneName,
         name: zoneName.replace(/_/g, ' '),
-        offset: 'UTC' + moment().tz(zoneName).format('Z')
+        offset: 'UTC' + tz.format('Z'),
+        nOffset: tz.utcOffset()
       }
     })
     return timezoneMap
@@ -73,19 +75,61 @@ angular.module('angular-timezone-selector', [])
         _.forEach(timezonesGroupedByCC, function (zonesByCountry, CC) {
           var zonesForCountry = {
             text: CCToCountryName[CC] + ': ',
-            children: zonesByCountry
+            children: zonesByCountry,
+            firstNOffset: zonesByCountry[0].nOffset
           }
 
           data.push(zonesForCountry)
         })
 
-        // Sort by country name
-        data = _.sortBy(data, 'text')
+        // Sort by UTC or country name
+        if (attrs.sortBy=="offset"){
+            data = _.sortBy(data, 'firstNOffset');
+            _.forEach(data,function(zonesForCountry,key){
+                zonesForCountry.children=_.sortBy(zonesForCountry.children, 'nOffset');
+            });
+        } else {
+            data = _.sortBy(data, 'text')
+        }
+
+        // add initial options forlocal
+        if (attrs.showLocal!=undefined){
+            if (jstz!=undefined){
+                var extraTZs = _.where(timezones,{'name':jstz.determine().name() });
+            } else {
+                var localUTC = 'UTC'+moment().format('Z');
+                var extraTZs = _.where(timezones,{'offset':localUTC});
+            }
+            data.splice(0,0,{
+              text: 'Local' + ': ',
+              children: extraTZs,
+              firstNOffset: extraTZs[0].nOffset,
+              firstOffset: extraTZs[0].offset
+          })
+        }
+
+        // add initial options
+        if (attrs.primaryChoices!=undefined){
+            // var primaryChoices=['UTC','GB','WET','GMT','Asia/Macau']
+            var primaryChoices = attrs.primaryChoices.split(' ');
+            var extraTZs = _.filter(timezones,function(tz){return _.contains(primaryChoices,tz.name)});
+            data.splice(0,0,{
+              text: 'Primary' + ': ',
+              children: extraTZs,
+              firstNOffset: extraTZs[0].nOffset,
+              firstOffset: extraTZs[0].offset
+            })
+        }
 
         // Construct a select box with the timezones grouped by country
         _.forEach(data, function (group) {
           var $optgroup = $('<optgroup label="' + group.text + '">')
           group.children.forEach(function (option) {
+
+            if (attrs.displayUtc=="true" && !option.name.includes('(UTC')){
+                option.name = option.name + ' (' + option.offset+')';
+            }
+
             $optgroup.append('<option value="' + option.id + '">' +
               option.name + '</option>')
           })

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-timezone-selector",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "homepage": "https://github.com/mishguruorg/angular-timezone-selector",
   "authors": [
     "Ashok Fernandez <ashok@mish.guru>"
@@ -29,5 +29,8 @@
     "lodash": "~3.9.3",
     "chosen": "~1.4.2",
     "bootstrap": "~3.3.4"
+  },
+  "devDependencies": {
+    "jsTimezoneDetect": "latest"
   }
 }

build/angular-timezone-selector.js

@@ -16,10 +16,12 @@ angular.module('angular-timezone-selector', [])
   .factory('timezones', ['_', 'moment', function (_, moment) {
     var timezoneMap = {}
     _.forEach(moment.tz.names(), function (zoneName) {
+      var tz=moment.tz(zoneName);
       timezoneMap[zoneName] = {
         id: zoneName,
         name: zoneName.replace(/_/g, ' '),
-        offset: 'UTC' + moment().tz(zoneName).format('Z')
+        offset: 'UTC' + tz.format('Z'),
+        nOffset: tz.utcOffset()
       }
     })
     return timezoneMap
@@ -73,19 +75,61 @@ angular.module('angular-timezone-selector', [])
         _.forEach(timezonesGroupedByCC, function (zonesByCountry, CC) {
           var zonesForCountry = {
             text: CCToCountryName[CC] + ': ',
-            children: zonesByCountry
+            children: zonesByCountry,
+            firstNOffset: zonesByCountry[0].nOffset
           }
 
           data.push(zonesForCountry)
         })
 
-        // Sort by country name
-        data = _.sortBy(data, 'text')
+        // Sort by UTC or country name
+        if (attrs.sortBy=="offset"){
+            data = _.sortBy(data, 'firstNOffset');
+            _.forEach(data,function(zonesForCountry,key){
+                zonesForCountry.children=_.sortBy(zonesForCountry.children, 'nOffset');
+            });
+        } else {
+            data = _.sortBy(data, 'text')
+        }
+
+        // add initial options forlocal
+        if (attrs.showLocal!=undefined){
+            if (jstz!=undefined){
+                var extraTZs = _.where(timezones,{'name':jstz.determine().name() });
+            } else {
+                var localUTC = 'UTC'+moment().format('Z');
+                var extraTZs = _.where(timezones,{'offset':localUTC});
+            }
+            data.splice(0,0,{
+              text: 'Local' + ': ',
+              children: extraTZs,
+              firstNOffset: extraTZs[0].nOffset,
+              firstOffset: extraTZs[0].offset
+          })
+        }
+
+        // add initial options
+        if (attrs.primaryChoices!=undefined){
+            // var primaryChoices=['UTC','GB','WET','GMT','Asia/Macau']
+            var primaryChoices = attrs.primaryChoices.split(' ');
+            var extraTZs = _.filter(timezones,function(tz){return _.contains(primaryChoices,tz.name)});
+            data.splice(0,0,{
+              text: 'Primary' + ': ',
+              children: extraTZs,
+              firstNOffset: extraTZs[0].nOffset,
+              firstOffset: extraTZs[0].offset
+            })
+        }
 
         // Construct a select box with the timezones grouped by country
         _.forEach(data, function (group) {
           var $optgroup = $('<optgroup label="' + group.text + '">')
           group.children.forEach(function (option) {
+
+            if (attrs.displayUtc=="true" && !option.name.includes('(UTC')){
+                option.name = option.name + ' (' + option.offset+')';
+            }
+
             $optgroup.append('<option value="' + option.id + '">' +
               option.name + '</option>')
           })

dist/angular-timezone-selector.js

@@ -16,10 +16,12 @@ angular.module('angular-timezone-selector', [])
   .factory('timezones', ['_', 'moment', function (_, moment) {
     var timezoneMap = {}
     _.forEach(moment.tz.names(), function (zoneName) {
+      var tz=moment.tz(zoneName);
       timezoneMap[zoneName] = {
         id: zoneName,
         name: zoneName.replace(/_/g, ' '),
-        offset: 'UTC' + moment().tz(zoneName).format('Z')
+        offset: 'UTC' + tz.format('Z'),
+        nOffset: tz.utcOffset()
       }
     })
     return timezoneMap
@@ -73,19 +75,61 @@ angular.module('angular-timezone-selector', [])
         _.forEach(timezonesGroupedByCC, function (zonesByCountry, CC) {
           var zonesForCountry = {
             text: CCToCountryName[CC] + ': ',
-            children: zonesByCountry
+            children: zonesByCountry,
+            firstNOffset: zonesByCountry[0].nOffset
           }
 
           data.push(zonesForCountry)
         })
 
-        // Sort by country name
-        data = _.sortBy(data, 'text')
+        // Sort by UTC or country name
+        if (attrs.sortBy=="offset"){
+            data = _.sortBy(data, 'firstNOffset');
+            _.forEach(data,function(zonesForCountry,key){
+                zonesForCountry.children=_.sortBy(zonesForCountry.children, 'nOffset');
+            });
+        } else {
+            data = _.sortBy(data, 'text')
+        }
+
+        // add initial options forlocal
+        if (attrs.showLocal!=undefined){
+            if (jstz!=undefined){
+                var extraTZs = _.where(timezones,{'name':jstz.determine().name() });
+            } else {
+                var localUTC = 'UTC'+moment().format('Z');
+                var extraTZs = _.where(timezones,{'offset':localUTC});
+            }
+            data.splice(0,0,{
+              text: 'Local' + ': ',
+              children: extraTZs,
+              firstNOffset: extraTZs[0].nOffset,
+              firstOffset: extraTZs[0].offset
+          })
+        }
+
+        // add initial options
+        if (attrs.primaryChoices!=undefined){
+            // var primaryChoices=['UTC','GB','WET','GMT','Asia/Macau']
+            var primaryChoices = attrs.primaryChoices.split(' ');
+            var extraTZs = _.filter(timezones,function(tz){return _.contains(primaryChoices,tz.name)});
+            data.splice(0,0,{
+              text: 'Primary' + ': ',
+              children: extraTZs,
+              firstNOffset: extraTZs[0].nOffset,
+              firstOffset: extraTZs[0].offset
+            })
+        }
 
         // Construct a select box with the timezones grouped by country
         _.forEach(data, function (group) {
           var $optgroup = $('<optgroup label="' + group.text + '">')
           group.children.forEach(function (option) {
+
+            if (attrs.displayUtc=="true" && !option.name.includes('(UTC')){
+                option.name = option.name + ' (' + option.offset+')';
+            }
+
             $optgroup.append('<option value="' + option.id + '">' +
               option.name + '</option>')
           })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-timezone-selector",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "AngularJS timezone selector",
   "main": "dist/angular-timezone-selector.min.js",
   "scripts": {