2016-10-22 4 views
0

Я способен отображать часовой пояс в формате HTML со смещением, используя следующий код:Как отобразить имя часового пояса вместо смещения

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

, что приводит к:

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

Однако я хотелось бы, чтобы он отображался с указанием названия часового пояса, а не смещения:

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

Как я могу сопровождать Это так?

+1

вы должны использовать 'moment' для него,' HTTP: // momentjs.com/docs/#/display/format/' – Sravan

+0

Как ваша дата на самом деле выглядит? – Sajeetharan

+0

Я бы также предложил moment.js, как сказал Сраван. Если вы не хотите эту зависимость, вы можете сохранить свой собственный массив смещений и выполнить замену простой строки? https://en.wikipedia.org/wiki/List_of_time_zone_abbreviations – Luke

ответ

1

Вот ответ, используя угловой момент,

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

Смежные вопросы