wake-up-neo.com

Verwenden des AngularJS-Datumsfilters mit UTC-Datum

Ich habe ein UTC-Datum in Millisekunden, das ich an Angulars Datumsfilter für die menschliche Formatierung weitergebe.

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

Awesome, außer dass someDate in UTC ist und vom Datumsfilter als Ortszeit eingestuft wird.

Wie kann ich Angular mitteilen, dass someDate UTC ist?

Vielen Dank.

69
Francisc

Ähnliche Frage hier

Ich werde meine Antwort erneut veröffentlichen und eine Zusammenführung vorschlagen:

Output UTC scheint verwirrt zu sein - die Leute scheinen auf moment.js hingezogen zu sein. 

Wenn Sie sich dieses answer ausleihen, könnten Sie Folgendes tun (d. H. Eine Konvertierungsfunktion verwenden, die das Datum mit dem UTC-Konstruktor erstellt) ohne moment.js:

Controller

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;

  }]);

Vorlage

<html ng-app="app1">

  <head>
    <script data-require="[email protected]*" 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>

hier ist plunker um damit zu spielen 

Siehe auch this und this .

Beachten Sie auch, dass bei dieser Methode der 'Z' des Datumsfilters von Angular scheinbar immer noch Ihren lokalen Zeitzonen-Offset druckt.

53
ossek

Es scheint, als würden AngularJS-Leute in Version 1.3.0 ..__ daran arbeiten. Alles, was Sie tun müssen, ist, : 'UTC' nach der Formatzeichenfolge hinzuzufügen. So etwas wie:

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

Wie Sie in docs sehen können, können Sie auch hier spielen: Plunker-Beispiel

Übrigens, ich denke, es gibt einen Fehler mit dem Z-Parameter, da er selbst bei 'UTC' immer noch die lokale Zeitzone anzeigt.

99
nir

Hier ist ein filter , der ein Date-String-Objekt OR von javascript () übernimmt. Es verwendet Moment.js und kann jede Moment.js - Transformationsfunktion anwenden, z. B. die beliebte 'fromNow'.

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);
  };
});

So...

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

würde 11. November 2014 anzeigen

{{ anyDateObjectOrString | moment: 'fromNow' }}

würde vor 10 Minuten anzeigen

Wenn Sie mehrere Momentenfunktionen aufrufen müssen, können Sie sie verketten. Dies konvertiert in UTC und formatiert dann ...

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

Es wurde ein Fehler in Angle.js Repo eingereicht https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

4
Jonathan Lau

Wenn Sie moment.js verwenden, würden Sie die Funktion moment (). Utc () verwenden, um ein Moment-Objekt in UTC zu konvertieren. Mit der Funktion moment (). Format () können Sie anstelle der Ansicht auch ein Nice-Format im Controller verarbeiten. Zum Beispiel:

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

Eine weiterentwickelte Version von ossek solution 

Benutzerdefinierte Filter sind geeigneter, dann können Sie sie überall im Projekt verwenden

js file

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 Vorlage

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

Nach einigen Recherchen konnte ich eine gute Lösung finden, um UTC in Ortszeit umzuwandeln. Schauen Sie sich die Geige an. Ich hoffe es hilft

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

Wenn Sie in .Net arbeiten, fügen Sie Folgendes in web.config hinzu 

<system.web>

wird dein Problem lösen: 

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

Könnte es funktionieren, den Filter folgendermaßen zu deklarieren?

   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

Sie haben auch die Möglichkeit, einen benutzerdefinierten Filter für Ihr Datum zu erstellen, der ihn im UTC-Format anzeigt. Beachten Sie, dass ich toUTCString() verwendet habe.

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