1

Boa Noite, estou usando uma diretiva para um Datepicker

DIRETIVE

angular.module('app').directive('datepicker', function() {
  return {
    restrict: 'A',
    require : 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      $(element).datepicker({
        dateFormat:'dd-mm-yyyy',
        language: 'pt-BR',
        pickTime: false,
        startDate: '01-11-2013',      
        endDate: '01-11-2030'          
      }).on('changeDate', function(e) {
        ngModelCtrl.$setViewValue(e.date);
        scope.$apply();
      });
    }
  };
});

mas quando eu vou pegar o valor do input no meu controller ele vem dessa forma

Tue Sep 01 2015 00:00:00 GMT-0300 (Hora oficial do Brasil)

e eu quero que venha normal 01/09/2015 por exemplo

1
  • isso é problema do tipo de dados da base de dados.
    – usersantos
    Commented 4/09/2015 às 10:04

2 Respostas 2

6

O evento dateChange retorna uma data e não uma string, caso queira exibir uma string com a a data local, use o método .toLocaleDateString().

angular.module('app').directive('datepicker', function() {
  return {
    restrict: 'A',
    require : 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      $(element).datepicker({
        dateFormat:'dd-mm-yyyy',
        language: 'pt-BR',
        pickTime: false,
        startDate: '01-11-2013',      
        endDate: '01-11-2030'          
      }).on('changeDate', function(e) {
        ngModelCtrl.$setViewValue(e.date.toLocaleDateString());
        scope.$apply();
      });
    }
  };
});

Note que o toLacaleDateString() irá imprimir a data usando o formato do cliente, no nosso caso 'dd/MM/yyyy', mas se um cliente norte americano acessar a sua pagina irá ver no formato 'M/d/yyyy', neste caso você pode forçar para exibir em um formato especifico.

var data = new Date();
console.log(data.toLocaleDateString());
console.log(data.toLocaleDateString("pt-BR"));
console.log(data.toLocaleDateString("pt-PT"));
console.log(data.toLocaleDateString("en-US"));

Você tambem pode setar as opções para modificar a forma como a data é exibida:

var data = new Date();
var options = {};

options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
console.log(data.toLocaleDateString([], options));

options = { timeZone: 'UTC', timeZoneName: 'short' }
console.log(data.toLocaleDateString([], options));

E um exemplo a titulo de curiosidade, alterando o calendaio e o sistema numerico da data:

var sistemas = ["arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"];

var calendarios = ["buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc"]

var data = new Date();
var datas = sistemas.map(function (sistema) {
    return {
        sistema: sistema,
        calendarios: calendarios.map(function (calendario) {
            var format = "pt-BR-u-nu-" + sistema + "-ca-" + calendario;
            try {
                return {
                    calendario: calendario,
                    format: format,
                    exemplo: data.toLocaleDateString(format)
                }
            } catch (e) {

            }
        })
    }
});

var srce = document.getElementById("tmpl");
var tmpl = Handlebars.compile(srce.innerHTML);
document.body.innerHTML = tmpl(datas);
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.1/handlebars.js"></script>
<script id="tmpl" type="text/template" >
    <table>
        <thead>
            <tr>
                <th></th>
                {{#each this.[0].calendarios}}
                <th>{{calendario}}</th>
                {{/each}}
            </tr>
        </thead>
        <tbody>
            {{#each this}}
            <tr>
                <th>{{sistema}}</th>
                {{#each calendarios}}
                <td><a href="#" title="{{format}}">{{exemplo}}<a></td>
                {{/each}}
            </tr>
            {{/each}}
        </tbody>
    <table>
</script>

para ver o formato utilizado, basta passar o mouse sobre a tabela. Se você quizer que todos no globo vejam a data no formato dd/MM/yyyy, use .toLocaleDateString('pt-BR-u-nu-latn-ca-gregory').

2
  • agora está dando um erro TypeError: Cannot read property 'split' of undefined Commented 6/09/2015 às 7:01
  • Eu descobri o que está causando o erro, mas não sei como corrigi-lo, é porque eu passei a usar este arquivo <script src="lib/angular/ui-bootstrap-tpls.js"></script> antes eu usava o <script src="lib/angular/ui-bootstrap.js"></script> Commented 6/09/2015 às 7:26
0

Pesquisando na documentação do AngularUI, notei que eles usam do filtro de data. Serviria para você?

<datetimepicker data-ng-model="data.date"></datetimepicker>
<p>Selected Date: {{ data.date | date:'yyyy-MM-dd HH:mm' }}</p>

Fonte: https://github.com/dalelotts/angular-bootstrap-datetimepicker

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 .