AngularJS UTC to Local Time Filter

In a previous post I detailed how to to implement the UTC time to local time conversion in Vanilla JS. Now let's take it a step further and utilize it in an AngularJS application. The best path forward will be to create a filter which will format the string being rendered. The end result will allow us to do something like the following:

AngularJS Filter Example:

1 2 3 4 5

<div class="row" ng-repeat="time in viewModel.times">   <div class="col-md-6">     <time datetime="{{time}}">{{ time | utctolocal }}</time>   </div> </div>

Basic usage is thus: create the filter, add the script tag to load the filter, add the module to be a dependency on the app.

AngularJS Filter Source:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

angular.module('intPonfilters', [])  .filter('utctolocal', function () {    var LeadingZero = function (val) {   return (val < 10) ? "0" + val : val;  },  ToDateString = function (dateObj, dateFormat) {   var curr_year = dateObj.getFullYear(),    curr_month = LeadingZero(dateObj.getMonth() + 1),    curr_date = LeadingZero(dateObj.getDate()),    curr_hour = LeadingZero(dateObj.getHours()),    curr_min = LeadingZero(dateObj.getMinutes()),    curr_sec = LeadingZero(dateObj.getSeconds()),    curr_ampm = "AM";   if (curr_hour > 11) {    curr_ampm = "PM";    curr_hour = (curr_hour == 12) ? 12 : curr_hour - 12;   }     var timestamp = curr_year + "-" + curr_month + "-" + curr_date + " " + curr_hour + ":" + curr_min + ":" + curr_sec + " " + curr_ampm + " " + LocalTimeZone();   return timestamp;  },   LocalTimeZone = function() {     // From http://stackoverflow.com/questions/2897478/get-client-timezone-not-gmt-offset-amount-in-js     var now = new Date().toString(),         timezone = now.indexOf('(') > -1 ?           //now.match(/\([^\)]+\)/)[0] :  // Uncomment this line to return the full time zone text           now.match(/\([^\)]+\)/)[0].match(/[A-Z]/g).join('') :  // Uncomment this line to return the full time zone abbreviation           now.match(/[A-Z]{3,4}/)[0];     if (timezone == "GMT" && /(GMT\W*\d{4})/.test(now))       timezone = RegExp.$1;     return timezone;   };    return function (input) {   var inputDate = new Date(input);   var dateString = ToDateString(inputDate);   return dateString;  }; });

An example can be found in my UTCtoLocalAngularJS GitHub repository.