Verwenden des AngularJS-Datumsfilters mit UTC-Datum

72

Ich habe ein UTC-Datum in Millisekunden, das ich zur menschlichen Formatierung an Angulars Datumsfilter übergebe.

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

Genial, außer someDatein UTC und der Datumsfilter betrachtet es als Ortszeit.

Wie kann ich Angular sagen, dass someDatees sich um UTC handelt?

Vielen Dank.

angularjs datetime angularjs-filter Francisc
quelle
Der Datumsfilter konvertiert ihn automatisch in die Ortszeit.
zs2020
5
Es ist nicht bekannt, dass das Datum UTC ist, daher ist die Konvertierung falsch.
Francisc
@see stackoverflow.com/questions/20470139/…
Dennis Jaamann
Mögliches Duplikat von Angular: Datumsfilter fügt Zeitzone hinzu, wie UTC ausgeben?
Jberryman
1
{{someDate | Datum: 'd MMMM yyyy': 'UTC'}}
Ali786

Antworten:

55

Ähnliche Frage hier

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

Die Ausgabe von UTC scheint Gegenstand einiger Verwirrung zu sein - die Leute scheinen sich für moment.js zu interessieren .

Aus dieser Antwort entlehnt, könnten Sie so etwas tun (dh eine Konvertierungsfunktion verwenden, die das Datum mit dem UTC-Konstruktor erstellt), ohne moment.js:

Regler

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="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>

Hier ist Plunker , um damit zu spielen

Siehe auch dies und das .

Beachten Sie auch, dass bei dieser Methode, wenn Sie das 'Z' aus dem Datumsfilter von Angular verwenden, Ihr lokaler Zeitzonenversatz anscheinend immer noch gedruckt wird.

ossek
quelle
108

Scheint, als würden AngularJS-Leute in Version 1.3.0 daran arbeiten. Sie müssen lediglich : 'UTC'nach der Formatzeichenfolge hinzufügen . Etwas wie:

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

Wie Sie in den Dokumenten sehen können , können Sie auch hier damit spielen: Plunker-Beispiel

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

nir
quelle
6
Ich denke, die Bestellung möchte ein UTC-Datum in eine lokale Formatzeichenfolge formatieren, im Gegenteil.
Tededyyu
1
Leider wird dieser zusätzliche Zeitzonenparameter in der Datums-Pipe von Angular 2 nicht unterstützt . Etwas wie das zu tun, was in der ersten Antwort vorgeschlagen wird, funktioniert immer noch in Angular 2.
munsellj
Hi @nir Das funktioniert bei mir. Frage: Wie auch immer, ich kann die Monatsnamen auf Spanisch in Englisch erhalten, wie oben angegeben. So instaed von den Monatsnamen wie Januar, Februar, März ... usw. Ich muss diese wie folgt machen: enero, febrero, marzo? Alle Hinweise würden helfen.
Nirmal
Wenn Sie den Wert 1506508005197 in den 27.09.2010 konvertieren möchten, verwenden Sie die oben vorgeschlagene Methode von nir {{record.deactivateDate | Datum: 'MM-TT-JJJJ': 'UTC'}}
Sagar S.
Was auch immer es die Frage beantwortet oder nicht, das ist es, wonach ich gesucht habe und es funktioniert perfekt. Aber vielleicht für andere: Wenn Sie es umgekehrt haben möchten, müssen Sie nur sicherstellen, dass Ihr Back-End es als 2018-07-17T21: 26: 00.000 + 00: 00 sendet. Angular weiß dann, dass es sich um eine UTC-Zeit handelt, und konvertiert sie standardmäßig korrekt in die Ortszeit.
CularBytes
11

Hier ist ein Filter , der eine Datumszeichenfolge ODER ein Javascript-Date () -Objekt verwendet. Es verwendet Moment.js und kann jede Moment.js- Transformationsfunktion anwenden , z. B. die beliebte Funktion '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);
  };
});

Damit...

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

würde den 11. November 2014 anzeigen

{{ anyDateObjectOrString | moment: 'fromNow' }}

würde vor 10 Minuten anzeigen

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

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

Eine weiterentwickelte Version der Ossek- Lösung

Benutzerdefinierter Filter ist besser geeignet, dann können Sie ihn überall im Projekt verwenden

js Datei

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>
Dasun
quelle
Dies ist tatsächlich falsch, da die UTC-Funktionen von date nicht mehr verwendet werden - im Gegensatz zu osseks Skript. es würde jedoch funktionieren, wenn das Datum in inputdie Zeichenfolge "UTC" am Ende enthalten würde.
Jörn Berkefeld
Vielen Dank für den Hinweis. Es scheint, dass die ursprüngliche Antwort nach meiner Antwort aktualisiert wurde :) Ich habe gerade seine Funktion in einen Filter eingewickelt.
Dasun
während wir gerade dabei sind: Könnte ich vorschlagen, $locale['DATETIME_FORMATS']['medium']anstelle des festen Fallback-Formats zu verwenden? Auf diese Weise verwenden Sie die eigene Lokalisierung von Angular. Ihr Format sieht schrecklich aus wie das en_US-Format, das überall auf der Welt sehr ungewöhnlich ist
Jörn Berkefeld,
erledigt! :). Der Vorlagenabschnitt wurde intakt gelassen, um zu zeigen, dass die Standardformatierung überschrieben werden kann.
Dasun
3

Wenn Sie moment.js verwenden, verwenden Sie die Funktion moment (). Utc (), um ein Moment-Objekt in UTC zu konvertieren. Mit der Funktion moment (). Format () können Sie auch ein schönes Format innerhalb des Controllers anstelle der Ansicht verarbeiten. Zum Beispiel:

moment(myDate).utc().format('MM/DD/YYYY')
Duffcodester
quelle
Er möchte es nicht in UTC konvertieren, da es bereits in UTC-Zeit ist. Sie sollten es so verwenden:moment().utc(myDate).format('MM/DD/YYYY')
nir
2

Nach einigen Recherchen konnte ich eine gute Lösung für die Umrechnung von UTC in Ortszeit finden. Schauen Sie sich die Geige an. 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>
user3444999
quelle
1

Sie haben auch die Möglichkeit, einen benutzerdefinierten Filter für Ihr Datum zu schreiben, der ihn im UTC-Format anzeigt. Beachten Sie, dass ich verwendet habe 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>
Erweitern Sie das Snippet

Mistalis
quelle
0

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

       };
    });
Matteo Piazza
quelle
-2

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

<system.web>

wird Ihr Problem lösen: 

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