Formatar data em JavaScript: gerador e exemplos

Formato de data em JavaScript

Formatar data em JavaScript: gerador de Intl.DateTimeFormat e exemplos | We.Inc

Formate datas em JavaScript sem biblioteca: um gerador de Intl.DateTimeFormat ao vivo, código para YYYY-MM-DD e MM/DD/YYYY, fusos horários, tempo relativo, intervalos e as armadilhas de parsing por trás dos bugs de um dia a menos.

Para formatar uma data em JavaScript, use Intl.DateTimeFormat ou toLocaleDateString com um locale e opções, por exemplo date.toLocaleDateString("en-US", { dateStyle: "long" }) para March 5, 2026. Use toISOString() para APIs, a opção timeZone para mostrar outro fuso e Intl.RelativeTimeFormat para expressões como há 3 dias.

Respostas rápidas

Necessidade
Use

Armazenar ou enviar uma data
toISOString()

Mostrar uma data para pessoas
Intl.DateTimeFormat / toLocaleDateString

Outro fuso horário
a opção timeZone

"há 3 dias"
Intl.RelativeTimeFormat

Escolha um locale e as opções no gerador e copie o código que ele escreve; a prévia é formatada pelo seu próprio navegador. Abaixo dele, uma tabela de formatos do dia a dia e exemplos executáveis para fusos, tempo relativo e intervalos.

Escolha um locale, ou digite qualquer tag BCP 47, como fr-CA.
Escolha um estilo predefinido, ou defina cada parte separadamente.
Se quiser, defina um fuso horário e o formato de 12 ou 24 horas.
Copie o código gerado para o seu projeto.

Crie um único Intl.DateTimeFormat e reutilize-o em loops; construir o formatador é a parte lenta.
Armazene e envie em UTC (strings ISO ou timestamps) e converta para o horário local só na hora de exibir.
Passe o locale do visitante (navigator.language) em vez de fixar en-US quando o público for internacional.
Evite fazer parsing de strings ambíguas como 03/05/2026; monte as datas a partir de números ou de strings ISO.

Perguntas frequentes

Como formato uma data como YYYY-MM-DD em JavaScript?

Use o ano local, o mês mais um e o dia, completados com padStart(2, "0"), e junte-os com hífens. toISOString().slice(0, 10) também gera esse formato, mas em UTC, então pode mostrar o dia errado perto da meia-noite.

Por que a minha data está com um dia de diferença?

new Date("2026-03-05") é lido como meia-noite UTC. A oeste de Greenwich, esse instante ainda é dia 4 no horário local. Faça o parsing com uma hora ("2026-03-05T00:00") ou com new Date(2026, 2, 5) para obter a meia-noite local.

Ainda preciso do Moment.js?

Não para formatar. O Intl cobre locales, fusos horários e tempo relativo em todos os navegadores modernos. Os próprios mantenedores do Moment o descrevem como um projeto legado; para aritmética de datas, uma biblioteca pequena como date-fns ou a API Temporal, mais nova (onde estiver disponível), funciona bem.

Como mostro um horário em um fuso específico?

Passe timeZone com um nome IANA, por exemplo { timeZone: "America/New_York", timeStyle: "short" }. O objeto Date continua sendo o mesmo instante; só muda a forma como ele é escrito.

Datas em um site de negócio

Horários de funcionamento, datas de eventos e datas de posts devem seguir o jeito como os seus visitantes as escrevem. Um público britânico lê 05/03 como 5 de março, um americano como 3 de maio, então escreva o mês por extenso (5 March 2026) sempre que o público for misto.
Para datas legíveis por máquina, como em um elemento HTML time ou em dados estruturados, use a forma ISO no atributo datetime e a forma amigável como texto visível.

Formatos comuns

Formatos comuns e o código de cada um

Você quer
Código
Resultado (en-US, 5 de março de 2026, 14:07)

ISO 8601 para APIs
d.toISOString()
O mesmo instante em UTC, terminando em Z

YYYY-MM-DD no horário local
d.toLocaleDateString("en-CA")

MM/DD/YYYY
d.toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" })

DD/MM/YYYY
d.toLocaleDateString("en-GB")

Data por extenso
d.toLocaleDateString("en-US", { dateStyle: "long" })
March 5, 2026

Dia da semana e data
{weekday:"long", month:"long", day:"numeric"}
Thursday, March 5

Hora, 12 horas
d.toLocaleTimeString("en-US", { timeStyle: "short" })
2:07 PM

Hora, 24 horas
{hour:"2-digit", minute:"2-digit", hourCycle:"h23"}

Relativo
new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(-1, "day")

Exemplos executáveis

Fazendo parsing de datas com segurança

Uma string ISO só com data é lida como meia-noite UTC, mas uma string de data e hora sem offset é lida como horário local. Essa diferença causa a maioria dos bugs de um dia a menos.

YYYY-MM-DD sem biblioteca

Monte a partir das partes locais com padStart. O truque do locale en-CA dá o mesmo resultado, mas depende de o formato desse locale continuar igual.

O mesmo instante em vários fusos horários

timeZone recebe um nome IANA. O Date em si não tem fuso; só a formatação muda. Note que timeZoneName não pode ser combinado com dateStyle ou timeStyle.

Tempo relativo (há 3 dias, em 2 horas)

Intl.RelativeTimeFormat escreve as palavras; você escolhe a unidade. Este helper escolhe a maior unidade que couber.

Intervalos de datas

formatRange remove as partes repetidas, então uma reserva do dia 5 ao dia 9 do mesmo mês fica natural de ler.

Layouts personalizados com formatToParts

Quando nenhum padrão serve, pegue as partes localizadas e organize-as você mesmo, por exemplo para deixar o dia maior que o mês.

Trabalhando com segundos desde a epoch? Use o

conversor de Unix timestamp

Opções de Intl.DateTimeFormat usadas no gerador

Opção
Valores

(nenhum)

(seu fuso)

Erro: {msg}

Gerador de Intl.DateTimeFormat

Data e hora

Locale

Fuso horário

Modo

Estilos predefinidos

Escolher cada parte

Copiar código

Comece grátis · Sem cartão de crédito