CODEWITHSUNDEEP
htmlangularjs
calilonghorn
calilonghorn

Reputation: 83

How to display time zone name instead of offset

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?

Upvotes: 0

Views: 910

Answers (1)

Sravan
Sravan

Reputation: 18657

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="[email protected]" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script data-require="[email protected]" 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

Upvotes: 1

Related Questions