Utiliser le filtre de date AngularJS avec la date UTC

j'ai une date UTC en millisecondes que je passe au filtre de date D'Angular pour le formatage humain.

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

Génial, à l'exception de someDate est en UTC et le filtre date de l'estime à l'heure locale.

Comment dire à Angular que someDate est UTC?

Merci.

68
demandé sur Francisc 2013-12-18 19:31:20

9 réponses

question similaire ici

je vais reformuler ma réponse et proposer une fusion:

sortie UTC semble être le sujet d'une certaine confusion -- les gens semblent graviter vers le moment .js .

empruntant à ce réponse , vous pouvez faire quelque chose comme ceci (i.e. utiliser une fonction de conversion qui crée la date avec le constructeur UTC) sans moment.js:

contrôleur

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;

  }]);

modèle

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

voici plunker jouer avec

Voir aussi ce et ce .

notez aussi qu'avec cette méthode, si vous utilisez le " Z " du filtre de date D'Angular, il semble qu'il va encore imprimer votre décalage horaire local.

53
répondu ossek 2017-05-23 12:02:48

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'.

97
répondu nir 2016-02-21 06:49:23

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' }}
11
répondu Charlie Martin 2015-10-09 16:11:51

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

4
répondu Jonathan Lau 2014-05-09 19:21:20

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')
3
répondu duffcodester 2014-09-02 01:20:11

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>
3
répondu Dasun 2017-02-01 20:43:02

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>
1
répondu user3444999 2017-07-24 19:27:40

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

       };
    });
0
répondu Matteo Piazza 2016-03-22 11:01:36

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>
0
répondu Mistalis 2017-04-27 11:48:02