Obter a data de hoje em HTML

O HTML não tem uma exibição dinâmica da data integrada. Use JavaScript para criar um objeto Date, formatar o valor para seus leitores e inserir o texto resultante em um elemento HTML. Um objeto Date representa um instante; métodos como getMonth() e toLocaleDateString() determinam como esse valor é apresentado.

Exibir a data e a hora atuais com JavaScript no HTML

Use new Date() quando precisar de um objeto Date e de seus métodos. Já chamar Date() sem new retorna imediatamente uma string de data e hora, que não pode ser usada com métodos como getFullYear(). Adicione à página um elemento com o ID current-date, selecione esse mesmo ID e defina seu textContent:

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

<p>Current date and time: <span id="current-date"></span></p>
<script>
  const currentDate = new Date();
  document.getElementById("current-date").textContent = currentDate.toString();
</script>

Como o script vem depois do elemento, ele já existe quando getElementById() é executado. O valor exibido depende do momento em que o script roda e do fuso horário local da máquina. Use textContent para inserir texto simples com a data; assim, o valor não é interpretado como marcação HTML. Este exemplo de página no navegador não é executado pelo runtime do artigo.

Para uma introdução mais ampla sobre como obter o valor atual, consulte JavaScript get current date.

Formatar a data como mês/dia/ano no HTML

Para exibir uma data numérica no padrão usado nos Estados Unidos, monte a string com as partes da data. getMonth() usa índices a partir de zero; some 1 para obter o número convencional do mês. getDate() retorna o dia do mês, enquanto getFullYear() retorna o ano. Este exemplo usa uma data fixa para facilitar a adaptação da lógica de formatação; substitua-a por new Date() para obter a data local de hoje.

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

const page = { textContent: "" };
const document = { getElementById: () => page };
const date = new Date(2024, 0, 5);
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const year = date.getFullYear();
document.getElementById("current-date").textContent = `${month}/${day}/${year}`;
console.log(page.textContent);

O argumento do mês no construtor também começa em zero: 0 significa janeiro. O preenchimento com zero mantém meses e dias de um único dígito sempre com dois dígitos. A ordem month/day/year é uma convenção de exibição, não um formato universal; escolha outra ordem se ela for mais adequada ao seu público. Para conhecer outros padrões de formatação, consulte JavaScript format date.

Formatar a data para uma localidade com toLocaleDateString()

Use toLocaleDateString() para solicitar que os recursos de internacionalização do navegador gerem uma string de data. Informe uma localidade, como en-US ou en-GB, para solicitar explicitamente uma convenção, e forneça opções para controlar quais partes serão exibidas. Sem uma localidade, o resultado pode seguir as configurações do navegador e variar entre leitores.

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

const date = new Date(2024, 0, 5);
const options = { year: "numeric", month: "long", day: "numeric" };
const formatted = date.toLocaleDateString("en-US", options);
console.log(formatted);

Altere a localidade para en-GB para solicitar as convenções do inglês britânico. O runtime escolhe a redação e a pontuação exatas com base nos dados da localidade; não interprete a string resultante como se tivesse uma estrutura fixa. Use toLocaleDateString() quando quiser apresentar a data no idioma do leitor e conforme convenções regionais, em vez de produzir uma data legível por máquina.

Incluir o dia da semana ou usar um formato de data mais legível

É possível incluir o dia da semana diretamente na formatação por localidade. Assim, você não precisa manter um array separado com os nomes dos dias, e a localidade escolhida determina a redação e a ordem.

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

const date = new Date(2024, 0, 5);
const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
console.log(date.toLocaleDateString("en-US", options));

As mesmas opções podem ser combinadas com outra localidade, como fr-FR, para exibir uma data longa localizada. Se você precisar apenas de um valor numérico curto, omita weekday e use opções numéricas para o mês e o dia. O texto formatado pode variar entre navegadores conforme os dados de localidade mudam, mesmo com a mesma localidade e as mesmas opções solicitadas.

Usar Moment.js para formatos adicionais de data e hora

Moment.js é uma biblioteca opcional e não é necessária para exibir datas básicas. Carregue Moment.js antes de chamar sua API e inclua os dados de localidade ao usar formatos localizados. As chamadas a seguir são ilustrativas e dependem dessa biblioteca na página: moment().format("YYYY-MM-DD") formata uma data de calendário; moment().fromNow() informa o tempo relativo ao instante atual; moment.locale("fr"); moment().format("LL") solicita um formato de data longa em francês quando os dados de localidade francesa estão carregados; e moment().calendar() escolhe a redação conforme a proximidade da data em relação ao momento atual.

O tempo relativo descreve um intervalo, não a data em que uma página foi publicada ou atualizada. Não use moment().fromNow() com o rótulo “Last updated” (última atualização), a menos que o valor se baseie em um registro real da data de atualização. Moment.js pode ser útil em projetos existentes que já incluem a biblioteca; para exibições simples, as APIs integradas de Date evitam adicionar uma dependência.

Converter uma data para UTC com toUTCString()

Use toUTCString() quando um padrão de horário compartilhado for mais útil do que o relógio local do leitor. O método retorna uma representação em string do valor de Date em UTC; ele não altera o instante subjacente nem o converte para o horário local do leitor.

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

const date = new Date("2024-01-05T12:30:00Z");
console.log(date.toUTCString());

Para usar um valor atual, substitua o timestamp ISO fixo por new Date(). Uma data em UTC pode cair em um dia do calendário diferente daquele do mesmo instante em um fuso horário local. Escolha a formatação local para uma data destinada ao leitor, a formatação por localidade para convenções regionais e UTC quando as pessoas precisarem comparar ou compartilhar uma referência de horário consistente. Consulte JavaScript convert date to UTC para orientações relacionadas a UTC.