85

Quero jogar a data atual num input, mas no formato "brasileiro" dd/mm/yyyy.

Meu código:

var data = new Date();
dataFormatada = ?????
$("#Data").val(dataFormatada);
2

12 Respostas 12

82

Você pode utilizar uma função para o feito, a fim de simplificar o seu trabalho:

function dataAtualFormatada(){
    var data = new Date(),
        dia  = data.getDate().toString(),
        diaF = (dia.length == 1) ? '0'+dia : dia,
        mes  = (data.getMonth()+1).toString(), //+1 pois no getMonth Janeiro começa com zero.
        mesF = (mes.length == 1) ? '0'+mes : mes,
        anoF = data.getFullYear();
    return diaF+"/"+mesF+"/"+anoF;
}

Para dd/mm/yyyy.

Exemplo:

Dia de hoje(resultado do código acima) em um <input type=text id=Data>:

$('#Data').val(dataAtualFormatada);

Teria como resultado o seguinte, no valor do input:

19/02/2014

Update: no ES8 (ECMAScript 2017) foi implementado o método padStart, por isso a solução pode ser utilizada de forma mais simples:

function dataAtualFormatada(){
    var data = new Date(),
        dia  = data.getDate().toString().padStart(2, '0'),
        mes  = (data.getMonth()+1).toString().padStart(2, '0'), //+1 pois no getMonth Janeiro começa com zero.
        ano  = data.getFullYear();
    return dia+"/"+mes+"/"+ano;
}

Observação:

Esta última solução não funcionará no Internet Explorer e em browsers que não tiverem suporte a ES8, para mais informações consulte a tabela de compatibilidade.

Polyfill

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength, padString) {
        targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
        padString = String(typeof padString !== 'undefined' ? padString : ' ');
        if (this.length >= targetLength) {
            return String(this);
        } else {
            targetLength = targetLength - this.length;
            if (targetLength > padString.length) {
                padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
            }
            return padString.slice(0, targetLength) + String(this);
        }
    };
}
11
  • 3
    O único problema dessa abordagem é que se o dia ou o mês tiver um único dígito, fica sem zero à esquerda.
    – mgibsonbr
    Commented 19/02/2014 às 17:57
  • 2
    isso é uma verdade, obrigado por lembrar @mgibsonbr Commented 19/02/2014 às 17:57
  • 2
    Agora não tem mais este problema @mgibsonbr Commented 19/02/2014 às 18:00
  • 2
    Mas e o dia!?!?
    – utluiz
    Commented 19/02/2014 às 18:00
  • 3
    Sim @JoaoPaulo, funciona apenas com $("#Data").val(dataAtualFormatada);. Editei minha pergunta colocando este exato exemplo para melhor entendimento. Commented 19/02/2014 às 19:07
65

Use as funções nativas do Javascript:

var data = new Date();
console.log(data.toLocaleDateString());

Referência: http://www.w3schools.com/jsref/jsref_obj_date.asp

6
  • 2
    muito prático e ainda por cima nativo, valeu! Commented 18/09/2019 às 14:25
  • 1
    essa sem dúvida é a melhor resposta e deveria ter sido escolhida como correta por adotar uma solução nativa da linguagem, sem necessidade de implementação de novas funções e bibliotecas de terceiros.
    – Paz
    Commented 21/09/2020 às 14:15
  • 2
    Melhor resposta! Commented 12/11/2020 às 19:19
  • 3
    Resolve, porém se estiver do lado client talvez ele não pegue a formatação DD/MM/YYYY por conta do locale. Para permanecer com esse padrão é bom passar o locale data.toLocaleDateString("pt-BR"). Mas sem dúvida foi a melhor resposta :D Commented 7/04/2021 às 12:04
  • Cara, simplesmente sensacional!! Commented 29/07/2021 às 4:13
42

Para quem não quiser reinventar a roda, existe a biblioteca moments.js, que cuida disso e de várias outras operações envolvendo datas em JavaScript. Entre as funções do moment está a formatação de datas em formatos que podem ser montados como strings. Exemplo de uso:

moment().format('MMMM Do YYYY, h:mm:ss a');
moment().format('dddd');
moment().format("MMM Do YY");
moment().format('YYYY [escaped] YYYY');
moment().format(); 

Note que usar uma biblioteca como essa pode ser um exagero, se a sua necessidade for somente formatar datas, em um único formato.

4
  • 10
    É raro vocês me verem postar sugestões de biblioteca aqui, eu gosto mesmo é de código puro. Mas esta achei que valia a pena.
    – bfavaretto
    Commented 19/02/2014 às 18:08
  • Interessante, porém achei meio estranho de entender, sei lá. Commented 19/02/2014 às 18:29
  • 1
    Eu fiz essa mesma recomendação no SOE esses dias. A maneira de fazer as coisas lembra muito o SimpleDateFormat do Java e Format Strings do .NET. Commented 19/02/2014 às 20:24
  • 3
    Uma nota para quem pretende usar Moment.js no futuro: Moment was built for the previous era of the JavaScript ecosystem. The modern web looks much different these days., presente na própria documentação do Moment.js. Então se for adicionar essa dependência agora no projeto, pense duas vezes e tente fazer sem :) Commented 25/10/2020 às 18:23
22

Se você estiver usando jQuery UI, pode usar uma função auxiliar do datepicker:

$.datepicker.formatDate('dd/mm/yy', new Date())

(Nota: acrescentei essa resposta pois vi no seu código de exemplo o uso de jQuery, ainda que a pergunta fosse sobre JavaScript puro. Cabe também notar que o jQuery simples não possui datepicker, apenas o jQuery UI)

3
  • Boa opção. Precisa so de 'yy' para mostrar 2014?
    – Joao Paulo
    Commented 19/02/2014 às 18:07
  • 1
    @JoaoPaulo Sim. Não sei se sequer existe opção de formatar ano com dois dígitos...
    – mgibsonbr
    Commented 19/02/2014 às 18:08
  • 1
    Eu consegui mostrar ano com dois dígitos usando 'dd/mm/y'. Funcionou, e aparentemente não acarretou em maiores problemas, pelo menos no meu código Commented 30/12/2016 às 0:13
9

("0" + data.getDate()).substr(-2) // Garante que haverá zero se < 9

No seu caso, seria

var data = new Date();
var dataFormatada = ("0" + data.getDate()).substr(-2) + "/" 
    + ("0" + (data.getMonth() + 1)).substr(-2) + "/" + data.getFullYear();

Formatar data em Javascript pode ser feito em apenas uma linha de código se você fizer um pad com "0" e substr. A maioria das pessoas nunca parou pra ver que isso é genial. Descobri isso alguns anos atrás no SO internacional, em uma pergunta.

Vantagens de formatar com "0" e substr

  • Código curto e direto
  • Menos IFs
  • Menos variáveis criadas
  • Pesa menos do que uma biblioteca apenas para manipular datas

Desvantagens

  • Em situações que tem que trabalhar com muitos formatos diferentes, uso de bibliotecas especificas é mais simples

Alternativa com toISOString

Uma alternativa mais legível é toISOString, porém ela não tem suporte em IE8

var data = new Date();
console.log(data.toISOString().substr(0, 10).split('-').reverse().join('/'));

Documentação do Date.prototype.toISOString() no MDN,com Polyfill para navegadores sem suporte

5
  • E as desvantagens? :p Commented 19/02/2014 às 18:30
  • @PauloRoberto Não trivial de ler. E quebra o limite de colunas que alguns gostam de ter em cada linha. Só estilo mesmo. Commented 19/02/2014 às 18:34
  • Isso é um snippet. Ou entende o conceito de substr e lembra na hora, ou você copia e cola um codigo pronto. Quanto a ser trivial de ler, bem, isso é javascript puro. Não é uma biblioteca inteira que aplica regex pra formatar uma data, então não vejo tanto problema assim em não ser legível. Aliás, reparem que ela deve funcionar até em IE5 Commented 19/02/2014 às 18:39
  • 1
    Na verdade eu acho bem legível.
    – bfavaretto
    Commented 19/02/2014 às 18:39
  • 1
    É.. retiro o "não trivial de ler". Apenas não estou tão familiarizado com JS e vi uma linha grande demais :) Commented 19/02/2014 às 18:44
7

Complementando as outras respostas...

Você menciona "formato brasileiro" e logo em seguida "dd/mm/yyyy". Apesar de serem "a mesma coisa" (já que é o formato mais comum no Brasil), existem algumas considerações quanto aos métodos usados nas outras respostas. Vejamos:


toLocaleDateString

Uma das respostas sugere usar toLocaleDateString() sem parâmetros. Isso pode ou não funcionar, já que este método, quando chamado sem parâmetros, usa o locale que estiver configurado no ambiente onde o código roda (que pode ser a configuração do browser, ou, no caso do Node, a configuração do sistema operacional/shell).

Por exemplo, o código abaixo:

var date = new Date();
console.log(date.toLocaleDateString());

Rodei este código hoje (9 de fevereiro de 2021, 21:00 no Horário de Brasília) no Node em uma máquina Ubuntu configurado em inglês. Rodando o código acima, o resultado foi 2/9/2021 (o irritante formato americano, com o mês antes do dia, e sem os zeros à esquerda para valores menores que 10).

Então para ter certeza que o formato brasileiro será usado, você tem que informar o locale (no caso, pt-BR, que equivale ao português brasileiro):

date.toLocaleDateString('pt-BR')

Aí sim será usado o formato correto, e a saída será 09/02/2021.

No Node, também é possível setar no início do script (obs: não funciona no Windows):

process.env.LANG="pt-BR.utf8";
// restante do código

Nesse caso, chamar toLocaleDateString() sem parâmetros irá usar o locale pt-BR e o formato brasileiro será usado. Mas isso muda também a configuração de todas as funções que usam o locale default do ambiente (como o toLocaleString() para números, entre outros), e isso nem sempre pode ser o desejado. Então se você já sabe qual locale quer usar, melhor passá-lo diretamente como parâmetro, sem precisar mudar uma configuração que pode afetar outras partes.


Mas tem um detalhe: se o locale não estiver instalado, isso não garante que será usado o formato correto. Por exemplo, o Node < 13 não vinha com os locales instalados, então mesmo usando pt-BR, era feito o fallback para o formato americano. E também há a possibilidade - mais rara, mas ainda sim possível - do formato associado ao locale mudar.


Pra não dizer que não respondi com algo novo...

E só para constar, uma alternativa que não foi contemplada nas outras respostas: é possível usar Intl.DateTimeFormat:

var formatter = new Intl.DateTimeFormat('pt-BR');
var date = new Date();
console.log(formatter.format(date));

Ele funciona de maneira similar à toLocaleDateString(), porém segundo a documentação, Intl.DateTimeFormat tem melhor desempenho quando você precisa formatar muitas datas (bastando criar apenas um e usar o método format).


Formato fixo

Outra possibilidade, para não depender do locale pt-BR estar instalado no ambiente onde o código roda, é formatar a data manualmente.

Várias respostas usam os getters para obter os valores do dia, mês e ano, e em seguida constroem a string, e uma em particular usa toISOString para obter esses mesmos valores. Esse é um caso em que deve-se tomar cuidado, pois toISOString retorna a data em UTC, enquanto os getters retornam os valores com base no timezone do ambiente (browser/SO).

Veja um exemplo que faz diferença (atenção, deve-se rodar o código abaixo em um browser configurado no Horário de Brasília, senão os resultados poderão ser diferentes):

function pad(valor) { // completa com zero à esquerda, se necessário
    return valor.toString().padStart(2, '0');
}

// 9 de de fevereiro de 2021, às 23:00
var date = new Date(2021, 1, 9, 23, 0);

// usando toLocaleDateString
console.log(date.toLocaleDateString('pt-BR')); // 09/02/2021

// usando os getters
console.log(`${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${pad(date.getFullYear())}`); // 09/02/2021

// usando o código da outra resposta (https://pt.stackoverflow.com/a/417433/112052)
console.log(date.toISOString().match(/^[0-9]{4}\-[0-9]{2}\-[0-9]{2}/)[0].split('-').reverse().join('/')); // 10/02/2021

Se o seu browser está configurado para o Horário de Brasília (o Chrome e o Firefox pegam do sistema operacional, os demais não tenho certeza), então vai notar que os 2 primeiros retornaram a data correta (09/02/2021), enquanto toISOString retornou um dia depois (10/02/2021).

Isso acontece porque toISOString retorna a data e hora em UTC, enquanto toLocaleDateString e os getters retornam os valores usando-se o timezone do browser. E como 9 de de fevereiro de 2021, às 23:00 no Horário de Brasília equivale a 10 de de fevereiro de 2021, às 02:00 em UTC, temos essa diferença. Então este é um ponto de atenção, caso decida-se usar toISOString (lembrando que em fusos horários diferentes, as datas/horas em que isso ocorre podem variar - em alguns casos, pode até retornar uma dia antes, por exemplo).

De resto, uma vez tendo os valores (seja em UTC ou no timezone do browser), as outras respostas já te dão muitas opções para formatá-los, e sobre este ponto específico não há muito o que acrescentar.

6

Utilizei a resposta do Paulo Roberto como base (ainda nao tinha implementação do zero nos meses com um digito) e fiz assim:

var data = new Date();

var dia  = data.getDate();
if (dia< 10) {
    dia  = "0" + dia;
}

var mes  = data.getMonth() + 1;
if (mes < 10) {
    mes  = "0" + mes;
}

var ano  = data.getFullYear();
dataFormatada = dia + "/" + mes + "/" + ano;
$("#Data").val(dataFormatada);

Adicionando o zero nos meses com um digito.

4
  • porém eu fui mais rápido e editei e coloquei o zero nos meses, haha. +1 pra você pois está correto. e achei interessante o seu (mes < 10) eu utilizei a length do mes transformada pra string =x Commented 19/02/2014 às 18:01
  • para if's que contenham apenas uma linha de código à executar você não precisa de braces que seriam { e } Commented 19/02/2014 às 18:05
  • E realmente o dia também precisa desse if! Quando o SO deixar, marcarei a sua como questão respondida. Obrigado @Paulo Roberto! Sim eu sei sobre braces, mas gosto de utiliza-los pois pra mim fica mais claro o código.
    – Joao Paulo
    Commented 19/02/2014 às 18:05
  • De nada, disponha meu caro @JoaoPaulo :) Commented 19/02/2014 às 18:06
4

Com base nesta pergunta montei um pequeno git com algumas funções auxiliares para estes fins.

Usando os métodos que disponibilizei pode se fazer assim :

var d = new Date();
console.log(d.toDate('dd/mm/yyyy hh:ii:ss'));

console.log(d.toDate('mm/dd/yyyy hh:ii:ss'));

console.log(d.toDate('yyyy-mm-dd'));

console.log(d.toDate('yyyy-dd'));
<script src="https://rawgit.com/Lautert/helpers/master/javascript.helpers.js"></script>

2
4

function formatDate(data, formato) {
  if (formato == 'pt-br') {
    return (data.substr(0, 10).split('-').reverse().join('/'));
  } else {
    return (data.substr(0, 10).split('/').reverse().join('-'));
  }
}

console.log(formatDate('23/04/2018'));
console.log(formatDate('2018-04-01', 'pt-br'));

2
  • 1
    A pergunta questiona como formatar um objeto Date, então acredito que falte em sua resposta a parte onde converte tal objeto para string, visto que sua função só funciona para string.
    – Woss
    Commented 2/05/2018 às 0:59
  • var dataAtual = new Date(); console.log(formatDate(dataAtual.toISOString(), 'pt-br')); Commented 24/05/2018 às 15:58
4
new Date(myDateString).toLocaleDateString('pt-br');

Exemplo:

console.log(new Date('2021/01/07').toLocaleDateString('pt-br'));
"07/01/2021"

Tente isso

1

Você pode formatar usando template string:

const formatar = (data) => {
  const ano = data.getFullYear();
  const mes = (`00${data.getMonth() + 1}`).slice(-2);
  const dia = (`00${data.getDate()}`).slice(-2);

  return `${dia}/${mes}/${ano}`;
};

// Teste da função
console.log(formatar(new Date()));


Template String

Template literals são literais string que permitem expressões embutidas. Você pode usar string multi-linhas e interpolação de string com elas. Elas eram chamadas "template strings" nas versões anteriores à especificação ES2015.

Sintaxe

`corpo de texto`
`texto linha 1
 texto linha 2`
`texto string ${expression} texto string`
tag `texto string ${expression} texto string`
0

console.log( (new Date()).toISOString().match(/^[0-9]{4}\-[0-9]{2}\-[0-9]{2}/)[0].split('-').reverse().join('/') )

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 .