web-dev-qa-db-ja.com

UTC日付でAngularJS日付フィルターを使用する

私は人間のフォーマットのためにAngularの日付フィルターに渡すUTC日付をミリ秒単位で持っています。

{{someDate | date:'d MMMM yyyy'}}

素晴らしい、someDateがUTCであり、日付フィルターはそれが現地時間であると見なします。

someDateがUTCであることをAngularに伝えるにはどうすればよいですか？

ありがとうございました。

angularjsdatetimeangularjs-filter
69
Francisc

同様の質問 こちら

回答を再投稿し、マージを提案します。

出力UTCは、いくつかの混乱の対象であると思われます-人は moment.js に引き寄せられているようです。

これから借りる answer 、moment.jsなしで次のようなことができます（つまり、UTCコンストラクターで日付を作成する変換関数を使用します）：

コントローラー

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

app1.controller('ctrl',['$scope',function($scope){

  var toUTCDate = function(date){
    var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
    return _utc;
  };

  var millisToUTCDate = function(millis){
    return toUTCDate(new Date(millis));
  };

    $scope.toUTCDate = toUTCDate;
    $scope.millisToUTCDate = millisToUTCDate;

  }]);

template

<html ng-app="app1">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="ctrl">
      <div>
      utc {{millisToUTCDate(1400167800) | date:'dd-M-yyyy H:mm'}}
      </div>
      <div>
      local {{1400167800 | date:'dd-M-yyyy H:mm'}}
      </div>
    </div>
  </body>

</html>

ここに plunker があります

this および this も参照してください。

また、この方法では、Angularの日付フィルターの 'Z'を使用すると、ローカルタイムゾーンオフセットが引き続き出力されるようです。

54
ossek

AngularJSの人々はバージョン1.3.0でそれに取り組んでいるようです。必要なのは、フォーマット文字列の後に: 'UTC'を追加することだけです。何かのようなもの：

{{someDate | date:'d MMMM yyyy' : 'UTC'}}

docs で見ることができるように、ここでそれを試すこともできます： Plunker example

ところで、「UTC」でもローカルタイムゾーンを表示するため、Zパラメーターにはバグがあると思います。

101
nir

これは、日付文字列OR javascript Date（）オブジェクトを受け取る filter です。 Moment.js を使用し、人気のある 'fromNow'などの任意の Moment.js 変換関数を適用できます。

angular.module('myModule').filter('moment', function () {
  return function (input, momentFn /*, param1, param2, ...param n */) {
    var args = Array.prototype.slice.call(arguments, 2),
        momentObj = moment(input);
    return momentObj[momentFn].apply(momentObj, args);
  };
});

そう...

{{ anyDateObjectOrString | moment: 'format': 'MMM DD, YYYY' }}

表示される2014年11月11日

{{ anyDateObjectOrString | moment: 'fromNow' }}

10分前に表示されます

複数のモーメント関数を呼び出す必要がある場合は、それらを連鎖させることができます。これはUTCに変換してからフォーマットします...

{{ someDate | moment: 'utc' | moment: 'format': 'MMM DD, YYYY' }}
11
Charlie Martin

Angular.jsリポジトリにこれに対して報告されたバグがあります https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

4
Jonathan Lau

Moment.jsを使用する場合、moment（）。utc（）関数を使用してmomentオブジェクトをUTCに変換します。 moment（）。format（）関数を使用して、ビューの代わりにコントローラー内でNice形式を処理することもできます。例えば：

moment(myDate).utc().format('MM/DD/YYYY')
3
duffcodester

ossek solutionの進化版

カスタムフィルターがより適切である場合は、プロジェクト内の任意の場所で使用できます

jsファイル

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

myApp.filter('utcdate', ['$filter','$locale', function($filter, $locale){

    return function (input, format) {
        if (!angular.isDefined(format)) {
            format = $locale['DATETIME_FORMATS']['medium'];
        }

        var date = new Date(input);
        var d = new Date()
        var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
        return $filter('date')(_utc, format)
    };

 }]);

in テンプレート

<p>This will convert UTC time to local time<p>
<span>{{dateTimeInUTC | utcdate :'MMM d, y h:mm:ss a'}}</span>
3
Dasun

いくつかの調査の後、UTCを現地時間に変換するための優れたソリューションを見つけることができました。フィドルを見てください。お役に立てば幸いです

https://jsfiddle.net/way2ajay19/2kramzng/20/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
  {{date | date:'yyyy-mm-dd hh:mm:ss' }}
</div>


<script>
function MyCtrl($scope) {
 $scope.d = "2017-07-21 19:47:00";
  $scope.d = $scope.d.replace(" ", 'T') + 'Z';
  $scope.date = new Date($scope.d);
}
</script>
1
user3444999

.Netで作業している場合、web.configに以下を追加します

<system.web>

あなたの問題を解決します：

<globalization culture="auto:en-US" uiCulture="auto:en-US" />
0
Muhammad Waqas

次の方法でフィルターを宣言することはできますか？

   app.filter('dateUTC', function ($filter) {

       return function (input, format) {
           if (!angular.isDefined(format)) {
               format = 'dd/MM/yyyy';
           }

           var date = new Date(input);

           return $filter('date')(date.toISOString().slice(0, 23), format);

       };
    });
0
Matteo Piazza

また、日付のカスタムフィルターを作成して、UTC形式で表示することもできます。 toUTCString() を使用したことに注意してください。

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

app.controller('dateCtrl', function($scope) {
    $scope.today = new Date();
});
    
app.filter('utcDate', function() {
    return function(input) {
       return input.toUTCString();
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  
<div ng-app="myApp" ng-controller="dateCtrl">      
    Today is {{today | utcDate}}       
</div>
0
Mistalis