Formato Data e ora in AngularJS

Come faccio a visualizzare correttamente la data e l'ora in AngularJS?

L'output di seguito mostra sia l'input che l'output, con e senza il filtro della data AngularJS:

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

Questo stampa:

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

Il formato di visualizzazione desiderato è 2010-10-28 23:40:23 0400o2010-10-28 23:40:23 EST

v.Dt probabilmente non è un oggetto Date ().

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

ma nel tuo controller:

scope.v.Dt = Date.parse(scope.v.Dt);

Il tuo codice dovrebbe funzionare come hai visto questo violino .

Dovrai assicurarti che il tuo v.Dtsia un oggetto Date appropriato affinché funzioni.

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

o se dateFormat è definito nell'ambito come dateFormat = 'yyyy-MM-dd HH: mm: ss Z':

{{dt | date:dateFormat }}

So che questo è un vecchio oggetto, ma ho pensato di aggiungere un'altra opzione da considerare.

Poiché la stringa originale non include il demarker "T", l'implementazione predefinita in Angular non la riconosce come una data. Puoi forzarlo usando la nuova data, ma questo è un po 'un problema per un array. Dal momento che puoi raggruppare i filtri insieme, potresti essere in grado di utilizzare un filtro per convertire il tuo input in una data e quindi applicare la data: filtro alla data di conversione. Crea un nuovo filtro personalizzato come segue:

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

Quindi, nel tuo markup, puoi raggruppare i filtri insieme:

{{item.myDateTimeString | asDate | date:'shortDate'}}

puoi ottenere il filtro "data" in questo modo:

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

Questo ti darà la data odierna nel formato che desideri.

Ecco un filtro che accetta una stringa di data O un oggetto Date () javascript. Utilizza Moment.js e può applicare qualsiasi funzione di trasformazione Moment.js , come il popolare "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);
  };
});

Così...

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

verrà visualizzato l' 11 novembre 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

verrebbe visualizzato 10 minuti fa

Se è necessario chiamare più funzioni momento, è possibile concatenarle. Questo converte in UTC e quindi formatta ...

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

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

Ecco alcuni esempi popolari:

<div>{{myDate | date:'M/d/yyyy'}}</div> 2014/07/04

<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

Hai visto la sezione Direttive di scrittura (versione breve) della documentazione ?

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

All'interno di un controller il formato può essere filtrato iniettando $ filter.

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

Semplicemente se vuoi produrre un output come "Jan 30, 2017 4:31:20 PM", segui il semplice passaggio

step1- Dichiara la seguente variabile nel controller js

$scope.current_time = new Date();

step2- visualizzazione nella pagina html come

{{current_time | Data: 'medium'}}

possiamo formattare la data sul lato di visualizzazione in angolare è molto semplice .... controlla l'esempio seguente:

{{dt | data: "gg-MM-aaaa"}}

È possibile utilizzare momentjsper implementare il filtro data-ora in angularjs. Per esempio:

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

Dove la data è in formato timestamp.

Aggiungi $filterdipendenza nel controller.

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

Ti suggerirei di usare moment.js che ha un buon supporto per la formattazione della data in base alle impostazioni locali.

creare un filtro che utilizzi internamente il metodo moment.js per la formattazione della data.