Angular: Example of filters that convert timezones and formats using moment.JS library

angular.module('plunker', []);

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>Moment / Moment TZ Demo</title>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-semver="1.4.0-rc.1"></script>
  <script data-require="moment.js@2.10.2" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
  <script data-require="moment-timezone-with-data@0.2.5" data-semver="0.2.5" src="http://momentjs.com/downloads/moment-timezone-with-data.min.js"></script>
  <script data-require="ui-bootstrap@0.13.0" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
  <script src="app.js"></script>
  <script src="filters.js"></script>
  <script src="controllers.js"></script>
  <script src="services.js"></script>
</head>

<body ng-controller="MainCtrl as vm">
  <div class='container'>
    <div class="text-center">
    <h4>Add Current Time</h4>
    <button type="submit" class="btn btn-primary" ng-click="vm.addTimeNow()">Add Time Now</button>
    </div>
    
    <hr>
    <h4 class="text-center">Select Time to Add</h4>
    <form class="form-inline" ng-submit="vm.addTime()">
      <div class="form-group">
        <label>Day</label>
        <select ng-model="vm.form.day" ng-init="vm.form.day=1" ng-options="day for day in vm.days"></select>
        <label>Month</label>
        <select ng-model="vm.form.month" ng-init="vm.form.month=1" ng-options="month for month in vm.months"></select>
        <label>Year</label>
        <select ng-model="vm.form.year" ng-init="vm.form.year=2015" ng-options="year for year in vm.years"></select>
      </div>
      <div class="form-group">
        <label>Hour</label>
        <input ng-model="vm.form.hour" ng-init="vm.form.hour=12" type="text">
        <label>Min</label>
        <input ng-model="vm.form.minute" ng-init="vm.form.minute=30" type="text">
      </div>
      <div class="form-group">
        <label>Timezone</label>
        <select ng-model="vm.form.timezone" ng-init="vm.form.timezone='UTC'" ng-options="zone for zone in vm.zones"></select>
      </div>
      <button type="submit" class="btn btn-primary">Add</button>
    </form>

    <hr>
    <h4 class="text-center">Convert Timezones Using a Filter</h4>

    <table class="table table-striped">
      <thead>
        <tr>
          <th>Input</th>
          <th>Timezones</th>
          <th>Output</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="time in vm.times">
          <td>{{ time | formatTime:'MMMM Do YYYY, HH:mm Z' }}</td>
          <td>
            <select ng-model="time.timezone" ng-init="time.timezone='UTC'" ng-options="zone for zone in vm.zones"></select>
          </td>
          <td>{{ time | convertTimezone:time.timezone | formatTime:'MMMM Do YYYY, HH:mm:ss Z' }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

/* Put your css in here */

angular
  .module('plunker')
  .filter('formatTime', function() {
    return function(input, format) {

      // check to make sure a moment object was passed
      if (!moment.isMoment(input)) {
        // do nothing
        return input;
      } else {
        return input.format(format);
      }
    };
  });

angular
  .module('plunker')
  .filter('convertTimezone', function() {
    return function(input, timezone) {
      var output;

      // use clone to prevent side-effects
      output = input.clone().tz(timezone);

      // if the timezone was not valid, moment will not do anything, you may
      // want this to log if there was an issue
      if (moment.isMoment(output)) {
        return output;
      } else {
        // log error...    
        return input;
      }
    };
  });

angular
  .module('plunker')
  .factory('Time', function() {
    var svc = {};

    svc.getAllZones = function() {
      return moment.tz.names();
    };

    svc.getMonthsByName = function() {
      return ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"];
    };
    
    svc.getMonthsByNumber = function() {
      return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    };
    
    svc.getYears = function() {
      return [2015, 2016, 2017];
    };
    
    svc.getDaysByNumber = function () {
      var days = [];
      
      for (var i = 1; i < 32; i++) {
        days.push(i);
      }
      
      return days;
    };

    return svc;
  });

angular
  .module('plunker')
  .controller('MainCtrl', function($scope, Time) {
      var vm = this;

      // form options
      vm.days = Time.getDaysByNumber();
      vm.months = Time.getMonthsByNumber();
      vm.years = Time.getYears();
      vm.zones = Time.getAllZones();

      // array of moment objects
      vm.times = [];

      // when form is submitted, push a moment object on to the vm.times object
      vm.addTimeNow = function() {
        vm.times.push(moment());
      };
      
      vm.addTime = function() {
        var obj = {
          year: Number(vm.form.year),
          // moment takes month in the format [0-11]
          month: (Number(vm.form.month))-1,
          day: Number(vm.form.day),
          hour: Number(vm.form.hour),
          minute: Number(vm.form.minute)
        };

        vm.times.push(moment.tz(obj, vm.form.timezone));
        };
        
        vm.outputApply = function () {
          $scope.$apply();
        };
      });