Como formatar a data em angularjs

quero formatar a data como mm/dd/yyyy. Tentei o seguinte e nada funciona comigo. Alguém me pode ajudar com isto?

Referência: data da ui

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

<input type="date" ng-model="valueofdate" />
Author: Kailas, 2014-03-14

13 answers

Angular.o js tem um filtro de data incorporado.

Demonstração

// in your controller:
$scope.date = '20140313T00:00:00';

// in your view, date property, filtered with date filter and format 'MM/dd/yyyy'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>

// produces
03/13/2014

Poderá ver os formatos de datas suportados na fonte para o filtro de datas .

editar:

Se está a tentar obter o formato correcto no comando de dados( não é claro se está a usar o comando de dados ou apenas a tentar usar o formatador), os textos de formato suportados estão aqui: https://api.jqueryui.com/datepicker/

 177
Author: Jim Schubert, 2014-03-14 02:53:29

Se você não está tendo um campo de entrada, em vez de apenas querer mostrar uma data de texto com uma formatação adequada, você pode simplesmente ir para:

<label ng-bind="formatDate(date) |  date:'MM/dd/yyyy'"></label>

E no ficheiro js usar:

    // @Function
    // Description  : Triggered while displaying expiry date
    $scope.formatDate = function(date){
          var dateOut = new Date(date);
          return dateOut;
    };

Isto irá converter a data em texto para um novo objecto de data em javascript e irá mostrar a data no formato MM/dd/AAAA.

Resultado: 12/15/2014

Editar
Se estiver a usar uma data de texto do formato "2014-12-19 20: 00: 00" formato de texto (passado de um PHP infra-estrutura), então você deve modificar o código para aquele em: https://stackoverflow.com/a/27616348/1904479

Acrescentar mais
A partir de javascript você pode definir o código como:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');

Caso já tenha uma data consigo, pode usar o seguinte código para obter a data actual do sistema:

$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');

Para mais detalhes sobre os formatos de data, consulte: https://docs.angularjs.org/api/ng/filter/date

 85
Author: Kailas, 2018-05-15 06:54:28
Estou a usar isto e está a funcionar bem.
{{1288323623006 | date:'medium'}}: Oct 29, 2010 9:10:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 09:10:23 +0530
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 9:10AM
{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}: 10/29/2010 at 9:10AM
 21
Author: Ravindra, 2016-12-07 12:30:58

Isso não é exatamente o que você está pedindo-mas você poderia tentar criar um campo de entrada de data em html algo como:

<input type="date" ng-model="myDate" />

Depois, para imprimir isto na página que usaria:

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

Finalmente, no meu controlador, declarei um método que cria uma data a partir do valor de entrada (que no cromado é aparentemente analisada 1 dia de folga):

$scope.convertToDate = function (stringDate){
  var dateOut = new Date(stringDate);
  dateOut.setDate(dateOut.getDate() + 1);
  return dateOut;
};
Então, aí está. Para ver tudo a funcionar ver o seguinte mergulhador: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview Boa sorte!
 15
Author: drew_w, 2014-03-14 00:07:57
Isto vai funcionar.
{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}

Nota: Depois de os substituir, a data restante/millis será convertida para o foramt indicado.

 9
Author: Nitish Kumar, 2015-07-21 08:27:09

Ver angular date api: AngularJS API: date


O filtro Angular - date:

Utilização:

{{ date_expression | date  [: 'format']  [: 'timezone' ] }}


Exampe:

Código:

 <span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>
Resultado:
10/29/2010
 5
Author: Eddy, 2016-05-31 11:46:07
Basta passar o formato de data UTC do seu código do lado do servidor para o lado do cliente

E usar abaixo da sintaxe -

 {{dateUTCField  +'Z' | date : 'mm/dd/yyyy'}}

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018
 3
Author: Shivprasad P, 2018-01-11 05:06:08

Depois de analisar todas as soluções acima, a seguinte foi a solução mais rápida para mim. Se estiver a utilizar material angular:

 <md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>

Para definir o formato:

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        // Requires Moment.js OR enter your own formatting code here....
        return moment(date).format('DD-MM-YYYY');
    };
});

Editar: Você também precisa definir o parsedato para escrever numa data (a partir desta resposta mudar o formato do MD-datepicker em material Angular)

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};
 1
Author: johan, 2017-05-23 12:26:24
A questão parece vir desta linha.:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106.

Na verdade, esta linha é a ligação com o jQuery UI que deve ser o local para injectar o formato de dados.

Como pode ver em var opts não existe nenhuma propriedade dateFormat com o valor a partir do formato ng-date, como poderá detectar.

De qualquer forma, a directiva tem uma constante chamada uiDateConfig para adicionar propriedades a opts.

O solução flexível (recomendada):

A partir de aqui pode ver que pode inserir algumas opções injectando na Directiva uma variável de controlo com as opções IU do jquery.

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

myAppModule.controller('MyController', function($scope) {
    $scope.dateOptions = {
        dateFormat: "dd-M-yy"
    };
});

A solução hardcoded:

Se não quiser repetir este procedimento a toda a hora, altere o valor de uiDateConfig em data.js to:

.constant('uiDateConfig', { dateFormat: "dd-M-yy" })
 0
Author: borracciaBlu, 2015-11-16 02:07:40

Eu tinha o mesmo problema e como os comentários acima, pensei que deveria haver um método nativo em JavaScript. O problema é que new Date(valueofdate) devolve um objecto de data.

Mas, check in http://www.w3schools.com/js/js_date_formats.asp a parte que diz "zero inicial". Uma data de uma String, por exemplo um eco de PHP, deve ser como:

$valueofdate = date('Y-n-j',strtotime('theStringFromQuery'));

Isto irá passar um texto, por exemplo: '1999-3-3' e o JavaScript fará a análise a um objecto com o formato correcto com

$scope.valueofdate = new Date(valueofdate);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

Ligação para PHP para formatos de data: http://www.w3schools.com/php/func_date_date_format.asp.

 0
Author: Juan José Campis, 2016-09-04 14:47:43

ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"

Use isto deve funcionar bem. :) Os campos resewdata e dateValue podem ser alterações conforme o seu parâmetro rest pode ser deixado o mesmo

 0
Author: Jayant Rajwani, 2017-05-10 07:46:54
var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

Aqui o nome do controlador é " myController "e o nome da aplicação é"myApp".

<div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="x in names">
                {{x | date:'mm-dd-yyyy'}}

            </li>

        </ul>
    </div>

O resultado ficará assim. :- * 10-29-2010 * 01-03-2013

 0
Author: Gopakumar AP, 2018-04-30 06:44:51
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>
 -1
Author: Siddhartha, 2017-08-14 00:24:07