title: Ionic Timezone Picker
body: <p>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 <a href="https://untappd.com/" rel="nofollow">Untappd</a>) an item that they are currently trying. And I want the checkin date to match their timezone. </p>
  
  <p><strong>Where I'm stuck:</strong> 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? </p>
  
  <p>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.)</p>
  
  <p><strong>Libraries found:</strong></p>
  
  <ul>
  <li><a href="https://github.com/mde/timezone-js" rel="nofollow">timezone-js</a></li>
  <li><a href="https://github.com/chouseknecht/angular-tz-extensions" rel="nofollow">angular-tz-extensions</a></li>
  <li><a href="http://tzdata-javascript.org/" rel="nofollow">tzdata-javascript.org</a></li>
  <li><a href="http://momentjs.com/timezone" rel="nofollow">moment-timezone</a></li>
  </ul>
  
  <p><strong>My implementation:</strong></p>
  
  <p><strong>index.html</strong> (I realize that this is overkill, but was trying to get any of them to work.)</p>
  
  <pre><code>&lt;!-- moment/timezone --&gt;
  &lt;script src="lib/timezone-js/src/date.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.js"&gt;&lt;/script&gt;
  &lt;script src="lib/angular-tz-extensions/lib/angular-tz-extensions.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/moment/min/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/angular-moment/angular-moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="lib/moment-timezone/moment-timezone.js"&gt;&lt;/script&gt;
  &lt;script src="lib/moment-timezone/moment-timezone-utils.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>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'
  )
  </code></pre>
  
  <p>I don't understand how <code>$timezones</code> is available, but that's what the <a href="https://github.com/chouseknecht/angular-tz-extensions" rel="nofollow">docs say</a>.</p>
  
  <p><strong>profile_edit.html</strong> (This is what I'm trying to get to.)</p>
  
  <pre><code>&lt;label class="item item-input item-select"&gt;
      &lt;div class="input-label"&gt;Timezone&lt;/div&gt;
      &lt;select name="data[User][timezone]" ng-model="item.User.timezone"&gt;
          &lt;option ng-repeat="zone in zones by zone.name" ng-value="zone.abbr"&gt;{{zone}}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/label&gt;
  &lt;label class="item item-input item-select"&gt;
      &lt;div class="input-label"&gt;GMT Offset&lt;/div&gt;
      &lt;select name="data[User][gmt_offset]" ng-model="item.User.gmt_offset"&gt;
          &lt;option ng-repeat="offset in offsets" ng-value="offset"&gt;{{offset}}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p><strong>controllers.js</strong></p>
  
  <pre><code>/**
   * 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();
    };
  })
  </code></pre>