web-dev-qa-db-fra.com

Format Date heure en AngularJS

Comment afficher correctement la date et l'heure dans AngularJS?

La sortie ci-dessous montre l’entrée et la sortie, avec et sans le filtre de date AngularJS:

In: {{v.Dt}}  
AngularJS: {{v.Dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

Cela imprime:

In: 2012-10-16T17:57:28.556094Z 
AngularJS: 2012-10-16T17:57:28.556094Z

Le format d'affichage souhaité est 2010-10-28 23:40:23 0400 ou 2010-10-28 23:40:23 EST

javascriptangularjsdatedatefilter
122
bsr

v.Dt n'est probablement pas un objet Date ().

Voir http://jsfiddle.net/southerd/xG2t8/

mais dans votre contrôleur:

scope.v.Dt = Date.parse(scope.v.Dt);
62
David Souther

Votre code devrait fonctionner comme vous l'avez vu ce violon .

Vous devrez vous assurer que votre v.Dt est bien un objet Date pour que cela fonctionne.

{{dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

ou si dateFormat est défini dans le domaine d'application comme dateFormat = 'aaaa-MM-jj HH: mm: ss Z':

{{dt | date:dateFormat }}
119
Gloopy

Je sais que c’est un produit ancien, mais je pensais que je proposerais une autre option à envisager.

Comme la chaîne d'origine n'inclut pas le marqueur "T", l'implémentation par défaut de Angular ne la reconnaît pas comme une date. Vous pouvez le forcer en utilisant une nouvelle date, mais c'est un peu pénible pour un tableau. Comme vous pouvez diriger les filtres ensemble, vous pouvez utiliser un filtre pour convertir votre entrée en date, puis appliquer le filtre date: à la date convertie. Créez un nouveau filtre personnalisé comme suit:

app
.filter("asDate", function () {
    return function (input) {
        return new Date(input);
    }
});

Ensuite, dans votre balisage, vous pouvez diriger les filtres ensemble:

{{item.myDateTimeString | asDate | date:'shortDate'}}
57
Jim Wooley

vous pouvez obtenir le filtre 'date' comme ceci:

var today = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss Z');

Cela vous donnera la date d'aujourd'hui dans le format que vous voulez.

56
CodeOverRide

Voici un filtre qui prendra une chaîne de date OR objet javascript Date (). Il utilise Moment.js et peut appliquer n'importe quelle fonction de transformation Moment.js , comme 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);
  };
});

Alors...

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

afficherait le 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' }}

https://Gist.github.com/cmmartin/341b017194bac09ffa1a

49
Charlie Martin

Voici quelques exemples populaires:

<div>{{myDate | date:'M/d/yyyy'}}</div>7/4/2014

<div>{{myDate | date:'yyyy-MM-dd'}}</div>2014-07-04

<div>{{myDate | date:'M/d/yyyy HH:mm:ss'}}</div>7/4/2014 12:01:59

22
James Lawruk

Avez-vous vu la section Écrire des directives (version courte) de la documentation ?

HTML

<div ng-controller="Ctrl2">
      Date format: <input ng-model="format"> <hr/>
      Current time is: <span my-current-time="format"></span>
</div>

JS

function Ctrl2($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}
15
Chase

Dans un contrôleur, le format peut être filtré en injectant $ filter.

var date = $filter('date')(new Date(),'MMM dd, yyyy');
6
Tjs

Simplement si vous voulez sortir comme "30 janvier 2017 16:31:20" puis suivez les étapes simples

step1- Déclare la variable suivante dans le contrôleur js

$scope.current_time = new Date();

step2- afficher en page HTML comme

{{current_time | date: 'moyen'}}

5
shani singh

nous pouvons formater la date du côté de la vue dans angular est très facile .... veuillez vérifier l'exemple ci-dessous:

{{dt | date: "jj-MM-aaaa"}}

5
Rajat-Systematix

Vous pouvez utiliser momentjs pour implémenter le filtre date-heure dans angularjs. Par exemple:

angular.module('myApp')
 .filter('formatDateTime', function ($filter) {
    return function (date, format) {
        if (date) {
            return moment(Number(date)).format(format || "DD/MM/YYYY h:mm A");
        }
        else
            return "";
    };
});

Où la date est au format horodatage.

3
Rubi saini

Ajoutez la dépendance $filter dans le contrôleur.

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')
1
Aniket B

Je vous conseillerais d'utiliser moment.js car il dispose d'un bon support pour le formatage de la date selon les paramètres régionaux.

créez un filtre qui utilise en interne la méthode moment.js pour formater la date.

0
Rahul Tokase