Format de la date et de l'heure dans AngularJS

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

La sortie ci-dessous montre à la fois 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 0400ou2010-10-28 23:40:23 EST

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

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

Vous devrez vous assurer que votre objet Datev.Dt est approprié pour que cela fonctionne.

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

ou si dateFormat est défini dans la portée comme dateFormat = 'aaaa-MM-jj HH: mm: ss Z':

{{dt | date:dateFormat }}

Je sais que c'est un ancien article, mais j'ai pensé ajouter une autre option à envisager.

Comme la chaîne d'origine n'inclut pas le marqueur "T", l'implémentation par défaut dans Angular ne le 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. Puisque vous pouvez diriger les filtres ensemble, vous pourrez peut-être utiliser un filtre pour convertir votre entrée en une date, puis appliquer la date: filtre à 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'}}

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 du jour dans le format souhaité.

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

Alors...

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

afficherait le 11 novembre 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

s'afficherait il y a 10 minutes

Si vous devez appeler plusieurs fonctions de moment, vous pouvez les enchaîner. Cela se convertit en UTC puis formate ...

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

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

Voici quelques exemples populaires:

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

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

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

Avez-vous vu la section Directives d'écriture (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';
}

À l'intérieur d'un contrôleur, le format peut être filtré en injectant $ filter.

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

Simplement, si vous voulez sortir comme "30 janvier 2017 16:31:20", passez à l'étape simple

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

$scope.current_time = new Date();

étape2- affichage dans la page html comme

{{heure_actuelle | date: 'moyen'}}

nous pouvons formater la date sur le côté de la vue en angulaire est très facile .... veuillez vérifier l'exemple ci-dessous:

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

Vous pouvez utiliser momentjspour implémenter un 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 d'horodatage.

Ajoutez une $filterdépendance dans le contrôleur.

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

Je vous suggère d'utiliser moment.js, il a un bon support pour le formatage de la date en fonction des paramètres régionaux.

créer un filtre qui utilise en interne la méthode moment.js pour le formatage de la date.