Ionic Timezone Picker - angularjs

Question

I'm trying to implement a Timezone picker in my Ionic project and I'm running into some issues. And to be a bit more specific, the timezone picker will be used on the edit profile page for a user. This timezone is important because my application allows the user to checkin (like Untappd) an item that they are currently trying. And I want the checkin date to match their timezone.
Where I'm stuck: I'm getting a bit confused due to the assortment of libraries offered. And I haven't had any luck implementing the solutions that I've found. I'm also a bit new to working with timezones to this degree, so another question is, should I allow the user to change their GMT offset? Or is it common to now just auto-detect this?
I've run across the following libraries, but as mentioned above I haven't had any luck implementing these in my Angular/Ionic project. (See below for code snippets.)
Libraries found:
timezone-js
angular-tz-extensions
tzdata-javascript.org
moment-timezone
My implementation:
index.html (I realize that this is overkill, but was trying to get any of them to work.)
<!-- moment/timezone -->
<script src="lib/timezone-js/src/date.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.js"></script>
<script src="lib/angular-tz-extensions/lib/angular-tz-extensions.min.js"></script>
<script src="lib/moment/min/moment.min.js"></script>
<script src="lib/angular-moment/angular-moment.min.js"></script>
<script src="lib/moment-timezone/moment-timezone.js"></script>
<script src="lib/moment-timezone/moment-timezone-utils.js"></script>
app.js
angular.module('curdcollective', [
'ionic',
'ionic.service.core',
'ionic.service.deploy',
'ionic.service.analytics',
'ionic.service.push',
'ngIOS9UIWebViewPatch',
[...](Removed for brevity),
'Timezones'
])
.constant(
'$timezones.definitions.location',
'/lib/angular-tz-extensions/tz/data'
)
I don't understand how $timezones is available, but that's what the docs say.
profile_edit.html (This is what I'm trying to get to.)
<label class="item item-input item-select">
<div class="input-label">Timezone</div>
<select name="data[User][timezone]" ng-model="item.User.timezone">
<option ng-repeat="zone in zones by zone.name" ng-value="zone.abbr">{{zone}}</option>
</select>
</label>
<label class="item item-input item-select">
<div class="input-label">GMT Offset</div>
<select name="data[User][gmt_offset]" ng-model="item.User.gmt_offset">
<option ng-repeat="offset in offsets" ng-value="offset">{{offset}}</option>
</select>
</label>
controllers.js
/**
* ProfileController
* Methods related to the user profile.
*/
.controller('ProfileController', function($state, $scope, $ionicHistory, $ionicPopup, $timezones, angularMomentConfig, $ionicModal, $stateParams, $resource, $sanitize, AuthService, LoadingService, ApiService, Me, $cordovaSocialSharing, BucketService) {
//Resolve a timezone
// var scope.timezone = $timezone.resolve('America/New_York', new Date());
// console.log(scope.timezone);
//Apply the timezone when a new one is selected
//from the edit profile view.
this.applyTimezone = function ($timezone) {
angularMomentConfig.preprocess = 'utc';
angularMomentConfig.timezone = $timezone.getName();
console.log(angularMomentConfig.timezone);
};
//#url https://github.com/chouseknecht/angular-tz-extensions
$timezones.getZoneList($scope);
$scope.$on('zonesReady', function(zones){
$scope.zones = zones;
console.log($scope.zones);
});
[...](Removed code for brevity.)
$scope.getTimeZonesList = function(moment){
console.log('getTimeZonesList');
var rZones = angular.forEach(moment.tz.zones(), function (zone) {
return {
name: zone.displayName,
abbr: moment.tz(zone.displayName).zoneAbbr()
};
});
console.log(rZones);
return rZones;
};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/profile_edit.html', {
scope: $scope
}).then(function(modal) {
$scope.editModal = modal;
});
//
$scope.showEditProfile = function(){
$scope.editModal.show();
};
$scope.hideEditProfile = function(){
$scope.editModal.hide();
};
})

Answer 1

I ended up making the following Angular Timezone service. It's not perfect and it could use some optimization and I could still use suggestions on how to make it better.
I'm auto-detecting if the user hasn't already set a timezone using Timezone.detect().
Here's the actual select code:
<select name="data[User][timezone]" ng-model="item.User.timezone" ng-options="zone.name for zone in zones" selected="item.User.timezone">
<option value="">Select Timezone</option>
</select>
See the gist at https://gist.github.com/robksawyer/98df7bb13d5efeac5dde.
/**
* Bower dependencies:
* timezone-js
* moment
* moment-timezone
* angular-moment
* angular-tz-extensions
*
* index.html:
* <script src="lib/timezone-js/src/date.js"></script>
* <script src="http://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.js"></script>
* <script src="lib/moment/min/moment-with-locales.min.js"></script>
* <script src="lib/moment-timezone/builds/moment-timezone-with-data.min.js"></script>
* <script src="lib/moment-timezone/moment-timezone-utils.js"></script>
* <script src="lib/angular-moment/angular-moment.min.js"></script>
* <script src="lib/angular-tz-extensions/lib/angular-tz-extensions.min.js"></script>
*/
angular.module('curdcollective.services', [
'angularMoment', 'Timezones'
])
/**
* TimezoneService
* Helper for Timezone related things
* #url https://github.com/chouseknecht/angular-tz-extensions
* #url https://github.com/urish/angular-moment
* #url http://momentjs.com/timezone/
*/
.service('TimezoneService', function(moment, $timezones, $filter, angularMomentConfig) {
//Get a list of timezones (via moment-timezone)
var timezones = [];
var autoDetectedTimezone = $timezones.getLocal() || 'UTC';
function pad(value) {
return value < 10 ? '0' + value : value;
}
function setDefaults(timezone){
if(!this.autoDetectedTimezone && !timezone){
return 'You need to detect the timezone first.';
}
//Set the default timezone
moment.tz.setDefault(this.autoDetectedTimezone);
angularMomentConfig.timezone = this.autoDetectedTimezone;
}
return {
//
//Initializes the timezone methods and loads required variables
//
initTimezones: function(){
this.timezones = [];
angular.forEach(moment.tz.names(), function (zone, key) {
this.push({
name: zone,
abbr: moment.tz(zone).zoneAbbr(),
offset: moment.tz(zone).format('Z')
});
}, this.timezones);
},
getTimezoneOffset: function(tz){
if(!tz){
tz = this.autoDetectedTimezone;
}
var rightNow = new Date();
var tzAlign = $timezones.align(rightNow, tz);
return tzAlign.getTimezoneOffset();
},
getHours: function(tz){
if(!tz){
tz = this.autoDetectedTimezone;
}
var rightNow = new Date();
var tzAlign = $timezones.align(rightNow, tz);
return tzAlign.getHours();
},
getGMTOffset: function(tz){
if(!tz){
tz = this.autoDetectedTimezone;
}
var rightNow = new Date();
var tzAlign = $timezones.align(rightNow, tz);
return $filter('date')(tzAlign,'Z');
},
//See https://github.com/chouseknecht/angular-tz-extensions
getLocale: function(tz){
if(!tz){
tz = this.autoDetectedTimezone;
}
return tz.locality;
},
//Handles setting the default timezone for the app.
setDefaults: function(timezone){
if(!this.autoDetectedTimezone && !timezone){
return 'You need to detect the timezone first.';
}
//Set the default timezone
moment.tz.setDefault(this.autoDetectedTimezone);
angularMomentConfig.timezone = this.autoDetectedTimezone;
},
//Handles auto-detecting the user's timezone
detect: function(){
this.autoDetectedTimezone = $timezones.getLocal() || 'UTC';
setDefaults(this.autoDetectedTimezone.name);
return this.autoDetectedTimezone.name;
},
//Retrieves a list of all timezones known
getTimezones: function(){
return this.timezones;
},
//DEPRECATED
/*createOffset: function(date) {
var sign = (date.getTimezoneOffset() > 0) ? '-' : '+';
var offset = Math.abs(date.getTimezoneOffset());
var hours = pad(Math.floor(offset / 60));
var minutes = pad(offset % 60);
return sign + hours + ':' + minutes;
}*/
};
});