6

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:

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?

9
  • Vê se ajuda: pt.stackoverflow.com/questions/6526/….
    – gustavox
    Commented 29/05/2015 às 3:04
  • 1
    Hehe, valeu pelo link. Mas o problema é com o tratamento do Angular.
    – gabrielhof
    Commented 29/05/2015 às 3:18
  • Ok, é que lembrei de um outro tópico, mas não achei, daí achei esse e pensei que pudesse ajudar... mas mesmo esse outro que pensei não tratava de angular.
    – gustavox
    Commented 29/05/2015 às 5:47
  • Use o momentjs tanto para exibir quanto para receber(converter) o valor, não tem erro. Commented 29/05/2015 às 12:03
  • 2
    NÃO uses o momentjs para isso. Odeio gente que para matar uma mosca sugere um canhão só porque a marca do canhão está na voga... O que tu tens que fazer é um filtro, que retorna a data como tu queres, e chamares esse filtro ao que está a ser feito no input.
    – MoshMage
    Commented 30/05/2015 às 10:12

2 Respostas 2

2

//Com js pode fazer da seguinte forma
// O input type=date vem no seguinte formato yyyy-mm-dd

// Para setar o valor caso esteja no formato dd/mm/yyyy

document.querySelector('[type=date]').value = '08/06/2017'.split('/').reverse().join('-');

// Para transformar de '2017-06-08' (formato devolvido no //document.querySelector('[type=date]').value) para //'08/06/2017'. Pode fazer isso: 

var brDate = '2017-06-08'.split('-').reverse().join('/');
var inputDate = '08/06/2017'.split('/').reverse().join('-');

console.log("br date: " + brDate);
console.log("input date: " + inputDate);
<input type="date" /> 

0

A sua ideia de criar uma directive pode funcionar se utilizar filtros. Eu vi que voce adicionou o $filter service no seu codigo, mas vc nao utilizou ele.

Da uma olhada no codigo abaixo:

module.directive("input", ["$filter", function($filter) {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
        if (element.attr("type") != "date") {
            return;
        }
        ngModelController.$parsers.push(function(data) {
          //View -> Model
          return data;
       });
       ngModelController.$formatters.push(function(data) {
          //Model -> View
          return $filter('date')(data, "DD-MM-YYYY");
        });
      }
    }
  };
}]);

Acho que so ficou faltando voce usar o $filter service na sua directive como eu fiz no codigo acima.

Espero que tenha ajudado.

1
  • Eu usei ele. Só abstraí o uso dele para simplificar o código de exemplo. Mas obrigado pela resposta. =)
    – gabrielhof
    Commented 19/06/2015 às 21:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .