How to display time zone name instead of offset

Question

I am able to display the time zone in HTML with the offset using the following code:

<span class="match-date">
    {{match.match_date | date:'fullDate'}} at {{match.match_date | date:'shortTime'}} {{match.match_date | date:'Z'}}
</span>

which results in:

Saturday, October 22, 2016 at 5:00 PM -0500

However I would like it to be displayed with the time zone name instead of the offset to look like:

Saturday, October 22, 2016 at 5:00 PM CDT

How can I accomplish this?

you should use `moment` for it, `http://momentjs.com/docs/#/displaying/format/` — Sravan, Oct 22 '16 at 06:14
I would also suggest moment.js as Sravan did. If you don't want this dependency, you could keep your own array of the offsets and do a simple string replace? https://en.wikipedia.org/wiki/List_of_time_zone_abbreviations — Luke, Oct 22 '16 at 06:30
Did you check these questions: [Display Date with Current Timezone in angularjs](http://stackoverflow.com/questions/26996509/display-date-with-current-timezone-in-angularjs) and [Detect timezone abbreviation using JavaScript](http://stackoverflow.com/q/1954397/4519059) ;). — shA.t, Oct 22 '16 at 06:36

score 1 · Accepted Answer · answered Oct 22 '16 at 06:54

Here is an answer using angular moment,

var app = angular.module('app', ['angularMoment']);

app.controller('TestCtrl', function($scope, $timeout) {
  $scope.obj = {
    dateStr: "2013-10-02T23:28:37+0000"
  };
  
  $scope.timezone=  /\((.*)\)/.exec(new Date($scope.obj.dateStr).toString())[1];
  
  console.log("moment", $scope.obj.dateStr, moment($scope.obj.dateStr));
  
  
  
  
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.0.8" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script data-require="moment.js@2.1.0" data-semver="2.1.0" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
    <!--<script src="angular-moment.min.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.0/angular-moment.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div  ng-controller="TestCtrl">
      <h1>Hello Plunker!</h1>
        <pre>{{ obj.dateStr | amDateFormat: 'h:mm a'}} {{timezone}}</pre>
        
    </div>
  </body>

</html>

Please run the above snippet

Here is a plunker

How to display time zone name instead of offset

1 Answers1