Objetos de data JavaScript

Índice

Os objetos de data do JavaScript nos permitem trabalhar com datas:

Ano:

Um exemplo de como obter o ano atual em Javascript:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The getFullYear() Method</h2>
<p>Return the full year of a date object:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>

</body>
</html>

Mês:

Um exemplo de como obter o mês atual em Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMonth() Method</h2>
<p>Return the month of a date as a number from 0 to 11.</p>
<p>To get the correct month number, you must add 1:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getMonth() + 1;
</script>

</body>
</html>

Dia:

Um exemplo de como obter o dia atual em Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getDate() Method</h2>
<p>Return the day of a date as a number (1-31):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getDate();
</script>

</body>
</html>

Horas:

Um exemplo de como obter a hora atual em Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getHours() Method</h2>
<p>Return the hours of a date as a number (0-23):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getHours();
</script>

</body>
</html>

Minutos:

Um exemplo de obtenção do minuto atual em Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getMinutes() Method</h2>
<p>Returns the minutes of a date as a number (0-59):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getMinutes();
</script>

</body>
</html>

Segundos:

Um exemplo de obtenção do segundo atual em Javascript:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>The getSeconds() Method</h2>
<p>Return the seconds of a date as a number (0-59):</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.getSeconds();
</script>

</body>
</html>

Exemplos

const d = new Date();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>new Date() without arguments, creates a date object with the current date and time:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

const d = new Date("2022-03-25");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p id="demo"></p>

<script>
const d = new Date("2022-03-25");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Observação

Os objetos de data são estáticos. O “relógio” não está “funcionando”.

O relógio do computador está correndo, os objetos de data não.

Saída de data JavaScript

Por padrão, o JavaScript usará o fuso horário do navegador e exibirá uma data como uma sequência de texto completa:

Você aprenderá muito mais sobre como exibir datas posteriormente neste tutorial.

Criando objetos de data

Objetos de data são criados com o Construtor new Date().

Existem 9 maneiras de criar um novo objeto de data:

new Date()
new Date(date string)

new Date(year,month)
new Date(year,month,day)
new Date(year,month,day,hours)
new Date(year,month,day,hours,minutes)
new Date(year,month,day,hours,minutes,seconds)
new Date(year,month,day,hours,minutes,seconds,ms)

new Date(milliseconds)

JavaScript `nova data()`

new Date() cria um objeto de data com a data e hora atuais:

Exemplo

const d = new Date();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>Create a new date object with the current date and time:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

`nova data(string de data)`

new Date(date string) cria um objeto de data a partir de uma string de data:

Exemplos

const d = new Date("October 13, 2014 11:13:00");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>A date object can be created with a specified date and time:</p>
<p id="demo"></p>

<script>
const d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

const d = new Date("2022-03-25");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p id="demo"></p>

<script>
const d = new Date("2022-03-25");
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Os formatos de string de data são descritos no próximo capítulo.

`nova data(ano, mês, ...)`

new Date(ano, mês, ...) cria um objeto de data com uma data e hora especificadas.

7 números especificam ano, mês, dia, hora, minuto, segundo e milissegundo (nessa ordem):

Exemplo

const d = new Date(2018, 11, 24, 10, 33, 30, 0);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>Using new Date(7 numbers), creates a new date object with the specified date and time:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Observação

JavaScript conta meses de 0 a 11:

Janeiro=0.

Dezembro=11.

Especificar um mês superior a 11 não resultará em erro, mas adicionará o estouro ao próximo ano:

Especificando:

const d = new Date(2018, 15, 24, 10, 33, 30);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript new Date()</h1>

<p>JavaScript counts months from 0 to 11.</p>
<p>Specifying a month higher than 11, will not result in an error but add the overflow to the next year:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 15, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

É o mesmo que:

const d = new Date(2019, 3, 24, 10, 33, 30);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript new Date()</h1>

<p>JavaScript counts months from 0 to 11.</p>

<p id="demo"></p>

<script>
const d = new Date(2019, 3, 24, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Especificar um dia maior que o máximo não resultará em erro, mas adicionará o estouro ao próximo mês:

Especificando:

const d = new Date(2018, 5, 35, 10, 33, 30);

É o mesmo que:

const d = new Date(2018, 6, 5, 10, 33, 30);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>

<p>JavaScript counts months from 0 to 11.</p>
<p>Specifying a day higher than max, will not result in an error but add the overflow to the next month:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 05, 35, 10, 33, 30, 0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Usando 6, 4, 3 ou 2 números

6 números especificam ano, mês, dia, hora, minuto, segundo:

Exemplo

const d = new Date(2018, 11, 24, 10, 33, 30);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>6 numbers specify year, month, day, hour, minute and second:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24, 10, 33, 30);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

5 números especificam ano, mês, dia, hora e minuto:

Exemplo

const d = new Date(2018, 11, 24, 10, 33);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>5 numbers specify year, month, day, hour, and minute:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24, 10, 33);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

4 números especificam ano, mês, dia e hora:

Exemplo

const d = new Date(2018, 11, 24, 10);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>4 numbers specify year, month, day, and hour:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24, 10);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

3 números especificam ano, mês e dia:

Exemplo

const d = new Date(2018, 11, 24);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>3 numbers specify year, month, and day:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

2 números especificam ano e mês:

Exemplo

const d = new Date(2018, 11);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>2 numbers specify year and  month:</p>

<p id="demo"></p>

<script>
const d = new Date(2018, 11);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Você não pode omitir o mês. Se você fornecer apenas um parâmetro, ele será tratado como milissegundos.

Exemplo

const d = new Date(2018);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>One parameter will be interpreted as new Date(milliseconds).</p>

<p id="demo"></p>

<script>
const d = new Date(2018);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Século Anterior

Anos de um e dois dígitos serão interpretados como 19xx:

Exemplo

const d = new Date(99, 11, 24);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>Two digit years will be interpreted as 19xx:</p>

<p id="demo"></p>

<script>
const d = new Date(99, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Exemplo

const d = new Date(9, 11, 24);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript new Date()</h2>
<p>One digit years will be interpreted as 19xx:</p>

<p id="demo"></p>

<script>
const d = new Date(9, 11, 24);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

JavaScript armazena datas em milissegundos

JavaScript armazena datas em milissegundos desde 1º de janeiro de 1970.

O horário zero é 1º de janeiro de 1970 00:00:00 UTC.

Um dia (24 horas) equivale a 86.400.000 milissegundos.

Agora é a hora:

milissegundos após 1º de janeiro de 1970

`nova data(milissegundos)`

new Date(milliseconds) cria um novo objeto de data como milissegundos mais tempo zero:

Exemplos

01 de janeiro de 1970 mais 100.000.000.000 milissegundos é:

const d = new Date(100000000000);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>100000000000 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

<script>
const d = new Date(100000000000);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

01 de janeiro de 1970 menos 100.000.000.000 milissegundos é:

const d = new Date(-100000000000);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>-100000000000 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

<script>
const d = new Date(-100000000000);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

01 de janeiro de 1970 mais 24 horas é:

const d = new Date(24 * 60 * 60 * 1000);
// or
const d = new Date(86400000);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>86400000 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

<script>
const d = new Date(86400000);
document.getElementById("demo").innerHTML = d;
</script>

<p>One day (24 hours) is 86,400,000 milliseconds.</p>

</body>
</html>

01 de janeiro de 1970 mais 0 milissegundos é:

const d = new Date(0);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>

<p>0 milliseconds from January 01 1970 UTC is:</p>
<p id="demo"></p>

<script>
const d = new Date(0);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Métodos de data

Quando um objeto de data é criado, vários métodos permitem que você opere isto.

Os métodos de data permitem obter e definir o ano, mês, dia, hora, minutos, segundos e milissegundos de objetos de data, usando a hora local ou UTC (universal ou GMT).

Métodos de data e fusos horários serão abordados nos próximos capítulos.

Exibindo datas

JavaScript irá (por padrão) gerar datas usando o método toString(). Esta é uma representação em string da data, incluindo o fuso horário. O formato é especificado na especificação ECMAScript:

Exemplo

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p>new Date() without arguments, creates a date object with the current date and time:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Quando você exibe um objeto de data em HTML, ele é automaticamente convertido em um string, com o método toString().

Exemplo

const d = new Date();
d.toString();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toString() Method</h2>

<p>Convert a date to a string:</p>
<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toString();
</script>

</body>
</html>

O método toDateString() converte uma data em uma data mais legível formatar:

Exemplo

const d = new Date();
d.toDateString();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toDateString() Method</h2>
<p>Convert a date to a date string:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>

</body>
</html>

O método toUTCString() converte uma data em uma string usando o padrão UTC:

Exemplo

const d = new Date();
d.toUTCString();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toUTCString() Method</h2>
<p>Convert a date to a string using the UTC standard:</p>

<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toUTCString();
</script>

</body>
</html>

O método toISOString() converte uma data em uma string usando o padrão ISO:

Exemplo

const d = new Date();
d.toISOString();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Dates</h1>
<h2>The toISOString() Method</h2>

<p>Convert a date to a string using the ISO standard:</p>
<p id="demo"></p>

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();
</script>

</body>
</html>

Referência completa de data JavaScript

Para uma referência completa da data, acesse:

Referência completa de data JavaScript.

A referência contém descrições e exemplos de todas as propriedades Date e métodos.

Objetos de data JavaScript

Índice

Ano:

Mês:

Dia:

Horas:

Minutos:

Segundos:

Exemplos

Observação

Saída de data JavaScript

Criando objetos de data

JavaScript nova data()

Exemplo

nova data(string de data)

Exemplos

nova data(ano, mês, ...)

Exemplo

Observação

Usando 6, 4, 3 ou 2 números

Exemplo

Exemplo

Exemplo

Exemplo

Exemplo

Exemplo

Século Anterior

Exemplo

Exemplo

JavaScript armazena datas em milissegundos

nova data(milissegundos)

Exemplos

Métodos de data

Exibindo datas

Exemplo

Exemplo

Exemplo

Exemplo

Exemplo

Referência completa de data JavaScript

JavaScript `nova data()`

`nova data(string de data)`

`nova data(ano, mês, ...)`

`nova data(milissegundos)`