JavaScript Academy · Aula

Formatando datas e horários

Exiba datas com Intl.DateTimeFormat.

Formatando datas e horários é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Intl.DateTimeFormat

Intl.DateTimeFormat formata objetos Date de acordo com uma localidade, substituindo a criação manual e frágil de textos.

const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"

Diferenças entre localidades

A ordem da data varia conforme a região: US usa mês/dia/ano, enquanto grande parte da Europa usa dia/mês/ano.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026

Predefinições de estilo de data

dateStyle oferece as predefinições "full", "long", "medium" e "short" para uma saída rápida e fácil de ler.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"

Estilo de hora

timeStyle funciona da mesma forma para a parte referente à hora e pode ser combinado com dateStyle.

const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"

Opções de componentes personalizados

Para ter um controle detalhado, especifique individualmente componentes como year, month, day e weekday.

const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"

Formatos de mês

month aceita "numeric", "2-digit", "short", "long" e "narrow".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d));  // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"

12 ou 24 horas

hour12: true/false substitui o padrão da localidade para o formato do relógio.

const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"

Fusos horários

Passe um nome IANA para timeZone a fim de exibir uma data em qualquer fuso, independentemente do fuso local do ambiente de execução.

const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));

formatToParts

formatToParts retorna uma matriz de tokens tipados, permitindo estilizar ou reorganizar partes individuais.

const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));

Formatando intervalos

formatRange(start, end) exibe um intervalo de datas de forma compacta, combinando os componentes compartilhados.

const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"

Calendários não gregorianos

A opção calendar é compatível com sistemas como "islamic", "hebrew" e "japanese".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));

Verificação rápida

Teste a formatação de datas.

Recapitulação: datas e horas

Você formatou datas e horas com Intl.DateTimeFormat, usou as predefinições dateStyle/timeStyle e opções detalhadas de componentes, trabalhou com fusos horários, relógios de 12 e 24 horas, formatToParts, intervalos e calendários alternativos. A seguir: tempo relativo e plurais.

Perguntas Frequentes

A aula “Formatando datas e horários” é grátis?

Sim — o texto completo de “Formatando datas e horários” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Formatando datas e horários”?

Exiba datas com Intl.DateTimeFormat. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Formatando datas e horários”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy