web-dev-qa-db-fra.com

Utilisation du filtre de date AngularJS avec la date UTC

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

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

Génial, sauf que someDate est en UTC et que le filtre de date considère que c'est en heure locale.

Comment puis-je dire à Angular que someDate est UTC?

Je vous remercie.

angularjsdatetimeangularjs-filter
69
Francisc

Question similaire ici

Je vais republier ma réponse et proposer une fusion:

La sortie UTC semble faire l’objet d’une certaine confusion - les gens semblent graviter vers moment.js . 

En empruntant cette réponse , vous pourriez faire quelque chose comme ceci (c’est-à-dire utiliser une fonction de conversion qui crée la date avec le constructeur UTC) sans moment.js:

manette

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 pour jouer avec 

Voir aussi this et this .

Notez également qu'avec cette méthode, si vous utilisez le filtre "Z" du filtre de date d'Angular, il semble qu'il imprimera toujours votre décalage horaire local.

53
ossek

On dirait que les gens d'AngularJS y travaillent dans la version 1.3.0 . Tout ce que vous avez à faire est d'ajouter : 'UTC' après la chaîne de formatage. Quelque chose comme:

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

Comme vous pouvez le voir dans les docs , vous pouvez aussi jouer avec ici: Exemple Plunker

BTW, je pense qu’il ya un bug avec le paramètre Z, car il montre toujours le fuseau horaire local, même avec 'UTC'.

99
nir

Voici un filter qui prendra une chaîne de date OR objet javascript Date (). Il utilise Moment.js et peut appliquer n’importe quelle fonction Moment.js transform, telle que la 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);
  };
});

Alors...

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

afficherait 11 novembre 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

afficherait il y a 10 minutes

Si vous devez appeler plusieurs fonctions de moment, vous pouvez les chaîner. Cela convertit au format UTC puis formate ...

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

Il y a un bug qui a été déposé dans angular.js repo https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

4
Jonathan Lau

Si vous utilisez moment.js, vous utiliserez la fonction moment (). Utc () pour convertir un objet moment en UTC. Vous pouvez également gérer un format Nice à l'intérieur du contrôleur au lieu de la vue en utilisant la fonction moment (). Format (). Par exemple:

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

Une version évoluée de ossek solution 

Le filtre personnalisé est plus approprié, 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 template 

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

Après quelques recherches, j'ai trouvé une bonne solution pour convertir l'UTC en heure locale. Jetez un coup d'œil au violon. J'espère que ça 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
user3444999

Si vous travaillez en .Net, ajoutez ensuite les éléments suivants dans web.config. 

<system.web>

va résoudre votre problème: 

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

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

Vous avez également la possibilité d'écrire un filtre personnalisé pour votre date, qui l'affichera au 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
Mistalis