Tenho uma página, construída com AngularJS, que possuí um input[type=date].
Basicamente, o que eu quero é pegar essa data e formatar (ou seja, exibir para o usuário) usando o formato 'dd/MM/yyyy'
(por exemplo: 28/05/2015
).
Qual o problema?
Hoje, não são todos os browsers que suportam o input[type=date]
. Aqueles que suportam (como o Chrome e o Opera) formatam a data do input
no formato 'dd/MM/yyyy'
, de acordo com as configurações do próprio navegador.
Já nos navegadores que não suportam (como o Firefox e o Safari), o Angular usa o formato yyyy-MM-dd
para formatar a data do input
. Esse formato, que apesar de ser legível, pode não agradar os usuários da aplicação, que estão acostumados com o formato brasileiro.
Qual a solução?
Em resumo, não consegui achar nenhuma forma de solucionar isso.
O Angular não possuí nenhuma diretiva para setar o formato do input. Então, tentei implementar uma diretiva que faça essa trabalho para mim, seguindo alguns posts do SO-EN:
- Angular.js and HTML5 date input value — how to get Firefox to show a readable date value in a date input?
- AngularJs - Directive to modify input formatting
- How to format a date using ng-model?
O resultado disso foi a seguinte diretiva:
module.directive("input", ["$filter", function($filter) {
return {
require: "ngModel",
restrict: "E",
link: function(scope, element, attrs, ngModelController) {
if (element.attr("type") != "date") {
return;
}
if (verificaSeNavegadorNaoSuportaInputDate()) {
ngModelController.$parsers.push(function(dataEmString) {
return converteStringParaData(dataEmString);
});
ngModelController.$formatters.push(function(data) {
return formataDataParaString(data);
});
}
}
};
}]);
Com essa diretiva, eu até consigo formatar a data setada no model, mas não consigo transformar a entrada do usuário em um objeto Date
. Mais precisamente o $validator
date
do NgModelController falha, já que, supostamente, o valor do input
não é uma data.
Para tentar ilustrar: usando a diretiva acima, o valor de form.inputDoTipoDate.$error.date
é igual a true
.
Alguém tem ideia de como posso implementar/corrigir essa diretiva?