Trabalhar com datas em Javascript pode ser um pouco esquisito. São tantas minucias que ja chegamos à criar bibliotecas (como Date-fns e Moment) para nos dar uma mão.
Mas não é sempre precisamos usar bibliotecas. Utilizar o próprio Javascript Date Object pode na verdade ser bastante simples se você souber o que está fazendo. Neste post, vou te guiar através dos métodos para trabalhar com datas em javascript.
DateJavaScript nos oferece uma funcionalidade para trabalhar com datas através de um poderoso objeto: Date.
new Date();
Por padrão, uma nova instância do Objeto Date (sem argumentos) cria um objeto correspondente à data e hora atual. A data será criada de acordo com as configurações do sistema do seu computador.
Internamente, as datas são expressas em milissegundos desde 1º de janeiro de 1970 (UTC). Esta data é importante porque, no que diz respeito aos computadores, foi aí que tudo começou.
Para demonstrar, vamos criar um instancia do objeto Date do JavaScript, criar uma variável e atribuir a data atual a ela. Este artigo está sendo escrito na terça-feira, 16 de junho em Sydney (GMT+10), portanto é a data, hora e fuso horário atual que está representada abaixo:
// Set variable to current date and time
const now = new Date();
console.log(now);
// Tue Jun 16 2020 09:03:11 GMT+1000 (Australian Eastern Standard Time)
Você pode já estar familiarizado com o timestamp UNIX: que representa o número de segundos que passaram desde aquela famosa data.
Importante falar que, o timestamp UNIX é dado em segundos. JavaScript Date é dado em milissegundos.
JavaScript, no entanto, entende a data com base em um timestamp (registro de tempo) derivado da hora Unix. Nós podemos obter o registro da hora com o método getTime().
console.log(now.getTime());
//1592262461187
Se tivermos um timestamp UNIX, podemos instanciar um objeto JavaScript Date usando:
const timestamp = 1592262818;
const whichDay = new Date(timestamp * 1000);
console.log(whichDay);
//Tue Jun 16 2020 09:13:38 GMT+1000 (Australian Eastern Standard Time)
Como você pode ver, são a mesma data nos dois exemplos, com diferença de alguns minutos.
Então para resumir essa conversa sobre timestamps and UNIX, um timestamp UNIX é dados em segundos e o objeto Javascript Date trabalha com milisegundos.
Tue Jun 16 2020 09:13:38 GMT+1000 (Australian Eastern Standard Time)
//timestamp in seconds -> 1592262818
//timestamp in milliseconds -> 1592262461187
//The second value is accepted for Javascript Date object
Até agora, nós já aprendemos como criar uma nova instância de Data baseada na hora atual, e como criar uma baseada em um timestamp. No total, existem quatro formatos pelos quais você pode criar uma nova data em JavaScript.
Além da hora atual, (instanciando o objeto Date sem argumentos), ou passando um timestamp em milisegundos, você também pode usar , ou especificar datas em formato de strings ou especificar cada valor do seu objeto.
new Date()new Date(timestamp)new Date(String)new Date(year, month, day, hours, minutes, seconds, milliseconds)Para demonstrar as diferentes formas de se referir a uma data específica, vamos criar novos objetos de Data que representarão 23 de junho de 1912 às 12h30 GMT de três formas diferentes. O motivo dessa data.
// June 23th,1912 at 10h30 GMT
// Timestamp method
console.log(new Date(-1815348600*1000));
//Sun Jun 23 1912 10:30:00 GMT+1000 (Australian Eastern Standard Time)
// Date string method
console.log(new Date("June 23 1912 10:30"));
//Sun Jun 23 1912 10:30:00 GMT+1000 (Australian Eastern Standard Time)
// Date and time method
console.log(new Date(1912, 5, 23, 10, 30, 0, 0));
//Sun Jun 23 1912 10:30:00 GMT+1000 (Australian Eastern Standard Time)
O timestamp Unix para essa data é: -1815348600. Como você deve ter percebido o número é negativo. Se a data for anterior à 01/01/1970 ela fica negativa.
Os três exemplos acima de tudo criam uma data contendo as mesmas informações.
No método de data e hora, nossos segundos e milissegundos são definidos como 0. Se algum número estiver faltando na criação da Data, ele será definido como 0. No entanto, a ordem não pode ser alterada, portanto tenha isso em mente se você decidir deixar um número de fora.
Você deve ter percebido que o mês de Junho é representado por 5, não o usual 6.. Isto porque os números de data e hora começam a partir de 0, como a maioria das linguagens de programação fazem, ex. Arrays.
getUma vez que temos uma data, podemos acessar todos os componentes da data com um dos vários métodos embutidos no objeto Date. Importan citar que:
| Method | Return | Example |
|---|---|---|
| getFullYear() | YYYY | 1999 |
| getMonth() | 0-11 | 0 = January / 11 = December |
| getDate() | 1-31 | 1 = First day of the month |
| getDay() | 0-6 | 0 = Sunday / 6 = Monday |
| getHours() | 0-23 | 0 = Midnight / 12 = Midday |
| getMinutes() | 0-59 | |
| getSeconds() | 0-59 | |
| getMilliseconds() | 0-999 | |
| getTime() | Milliseconds since Epoch time |
Vamos dar vários exemplos para explicar o melhor possível como cada método funciona.
Vamos começar criando uma novo objeto do Javascript Date, eu vou utilizar o método Data String, mas você pode usar qualquer um outro.
const myDate = new Date("June 23 1912 10:30");
console.log(myDate.getFullYear()); // 1912
console.log(myDate.getMonth()); // 5
console.log(myDate.getDate()); // 23
console.log(myDate.getDay()); // 0
console.log(myDate.getHours()); // 10
console.log(myDate.getMinutes()); // 30
console.log(myDate.getSeconds()); // 0
console.log(myDate.getMilliseconds()); // 0
console.log(myDate.getTime()); // -1815348600000
Apenas com esses métodos, já conseguimos criar alguns pequenos programas, por exemplo, esse código abaixo mostra para o usuário o dia da semana por extenso para o usuário:
const now = new Date();
switch (now.getDay()) {
case 0:
console.log("Today is Sunday - Go Rest");
break;
case 1:
console.log("Today is Monday - Go Coding");
break;
case 2:
console.log("Today is Tuesday - Go Coding");
break;
case 3:
console.log("Today is Wednesday - Go Coding");
break;
case 4:
console.log("Today is Thursday - Go Coding");
break;
case 5:
console.log("Today is Friday - Go Coding");
break;
case 6:
console.log("Today is Saturday - Go Rest");
break;
default:
console.log("You don't live on earth");
break;
}
Os métodos embutidos no objeto Javascript Date que começam com get nos permitem acessar componentes da data e retornam o número associado ao que estamos recuperando do objeto instanciado.
setPara todos os métodos que aprendemos acima, há um conjunto correspondente de métodos. Onde get é usado para recuperar um componente específico de datas em javascript, set é usado para modificar os componentes de datas em javascript,. Observe na tabela abaixo todos os métodos set que o Objeto Date nos oferece.
| Method | Return | Example |
|---|---|---|
| setFullYear() | YYYY | 1999 |
| setMonth() | 0-11 | 0 = January / 11 = December |
| setDate() | 1-31 | 1 = First day of the month |
| setDay() | 0-6 | 0 = Sunday / 6 = Monday |
| setHours() | 0-23 | 0 = Midnight / 12 = Midday |
| setMinutes() | 0-59 | |
| setSeconds() | 0-59 | |
| setMilliseconds() | 0-999 | |
| setTime() | Milliseconds since Epoch time |
Podemos usar estes métodos para modificar um ou todos os componentes de uma data. Por exemplo, podemos mudar o ano da nossa variável do primeiro exemplo, simplesmente fazendo:
const myDate = new Date("June 23 1912 10:30");
myDate.setFullYear(1900);
console.log(myDate);
E acabamos de colocar mais 12 anos na conta desse sujeito.
Um exemplo mais elaborado, se você quiser saber qual dia da semana será em uma especifica data do mês corrente, você pode fazer assim:
const futureDay = 18;
const now = new Date();
now.setDate(futureDay);
switch (now.getDay()) {
case 0:
console.log(futureDay + "th this month will be Sunday");
break;
case 1:
console.log(futureDay + "th this month will be Monday");
break;
case 2:
console.log(futureDay + "th this month will be Tuesday");
break;
case 3:
console.log(futureDay + "th this month will be Wednesday");
break;
case 4:
console.log(futureDay + "th this month will be Thursday");
break;
case 5:
console.log(futureDay + "th this month will be Friday");
break;
case 6:
console.log(futureDay + "th this month will be Saturday");
break;
default:
console.log("You don't live on earth");
break;
}
//"18th this month will be Thursday"
Os métodos internos que começam com set permitem-nos modificar diferentes partes de um objeto Date. Você pode alterar qualquer uma das propriedades de uma data em Javascript.
Neste tutorial, aprendemos como criar uma instância do objeto Data, e usar seus métodos internos para acessar e modificar componentes de datas em Javascript.
Saber trabalhar com datas em Javascript é essencial para muitas tarefas comuns, pois isso pode permitir que você faça muitas coisas, desde configurar um relatórios até exibir datas e horários no fuso horário correto.
Deixe um comentário