Utiliser le filtre de date AngularJS avec la date UTC

semble comme les gens D'AngularJS travaillent dessus dans la version 1.3.0. Tout ce que vous devez faire est d'ajouter : 'UTC' après la chaîne de format. Quelque chose comme:

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

comme vous pouvez le voir dans le docs , vous pouvez également jouer avec elle ici: exemple de plongeur

BTW, je pense qu'il y a un bug avec le paramètre Z, puisqu'il affiche toujours le fuseau horaire local même avec 'UTC'.

voici un filtre qui prendra une chaîne de date ou un objet Date() javascript. Il utilise le Moment .js et peut appliquer n'importe quel Moment .js fonction de transformation, tels que le populaire "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' }}

afficherait Nov 11, 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

afficherait il y a 10 minutes

si vous devez appeler plusieurs fonctions de moments, vous pouvez les enchaîner. Cela convertit en UTC puis en formats...

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

il y a un bug enregistré contre ceci en angle.js repo https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

si vous utilisez moment.js vous utilisez l'instant().UTC () fonction pour convertir un objet moment en UTC. Vous pouvez également gérer un format agréable à l'intérieur du controller au lieu de la vue en utilisant le moment().fonction format (). Par exemple:

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

une version évoluée de ossek solution

filtre personnalisé est plus approprié, alors vous pouvez l'utiliser n'importe où dans le projet

js fichier

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

 }]);

dans modèle

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

après quelques recherches j'ai pu trouver une bonne solution pour convertir UTC en heure locale, jeter un oeil au violon. Espérons qu'il aide

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>

pourrait-il fonctionner en déclarant le filtre de la manière suivante?

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

       };
    });

vous avez également la possibilité d'écrire un filtre personnalisé pour votre date, qui l'afficher dans le format UTC. Notez que j'ai utilisé 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>