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" />
13 answers
// 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/
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
{{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
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!
{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}
Nota: Depois de os substituir, a data restante/millis será convertida para o foramt indicado.
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
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
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);
};
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.
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" })
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.
$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.
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
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
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>