Formatar data e hora no AngularJS

Como faço para exibir corretamente a data e hora em AngularJS?

A saída abaixo mostra a input e a saída, com e sem o filtro de data AngularJS:

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

Isso imprime:

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

O formato de exibição desejado é 2010-10-28 23:40:23 0400 ou 2010-10-28 23:40:23 EST

v.Dt provavelmente não é um object Date ().

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

mas no seu controlador:

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

Seu código deve funcionar como você vê este violino .

Você terá que certificar-se de que seu v.Dt é um object Date apropriado para que ele funcione.

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

ou se dateFormat estiver definido no escopo como dateFormat = ‘aaaa-MM-dd HH: mm: ss Z’:

 {{dt | date:dateFormat }} 

Eu sei que este é um item antigo, mas pensei em lançar outra opção a considerar.

Como a string original não inclui o demarcador “T”, a implementação padrão no Angular não a reconhece como uma data. Você pode forçá-lo usando o novo Date, mas isso é um pouco doloroso em um array. Como você pode canalizar filtros juntos, talvez seja possível usar um filtro para converter sua input em uma data e, em seguida, aplicar a data: filter na data convertida. Crie um novo filtro personalizado da seguinte maneira:

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

Em seguida, na sua marcação, você pode canalizar os filtros juntos:

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

você pode obter o filtro ‘data’ assim:

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

Isso lhe dará a data de hoje no formato desejado.

Aqui está um filtro que levará uma string de data OU object javascript Date (). Ele usa Moment.js e pode aplicar qualquer function de transformação Moment.js , como o popular ‘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); }; }); 

Assim…

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

exibiria 11 de novembro de 2014

 {{ anyDateObjectOrString | moment: 'fromNow' }} 

seria exibido 10 minutos atrás

Se você precisar chamar várias funções de momento, poderá encadeá-las. Isso converte em UTC e, em seguida, formata …

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

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

Aqui estão alguns exemplos populares:

{{myDate | date:'M/d/yyyy'}}

{{myDate | date:'M/d/yyyy'}}

7/4/2014

{{myDate | date:'yyyy-MM-dd'}}

{{myDate | date:'yyyy-MM-dd'}}

2014-07-04

{{myDate | date:'M/d/yyyy HH:mm:ss'}}

{{myDate | date:'M/d/yyyy HH:mm:ss'}}

7/4/2014 12:01:59

Você já viu a seção de diretivas de escrita (versão curta) da documentação ?

HTML

 
Date format:
Current time is:

JS

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

Dentro de um controlador, o formato pode ser filtrado injetando $ filter.

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

podemos formatar a data no lado da vista em angular é muito fácil …. por favor, verifique o exemplo abaixo:

{{dt | data: “dd-MM-aaaa”}}

Simplemente se você quiser produzir como “Jan 30, 2017 4:31:20 PM” então siga para o passo simples

step1- Declare a seguinte variável no controller js

 $scope.current_time = new Date(); 

step2- display em html page como

{{current_time | date: ‘medium’}}

Você pode usar o momentjs para implementar o filtro de data e hora em angularjs. Por exemplo:

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

Onde data está no formato de data e hora.

Eu sugiro que você use moment.js tem um bom suporte para formatação de data de acordo com as localidades.

crie um filtro que use internamente o método moment.js para a formatação da data.

Adicione $filter dependência de $filter no controlador.

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