Introdução
A data e a hora não são apenas componentes críticos da vida rotineira, mas também parte da programação de computadores. Quer precise delas para agendar compromissos ou exibir um calendário, existem muitos motivos pelos quais você precisaria de uma data e hora. As aplicações dos recursos de data e hora são extensas e extremamente versáteis. A versatilidade vem do fato de que você pode configurar a hora e a data com base no usuário. Cada usuário em uma localização geográfica diferente obterá um resultado diferente com base no seu fuso horário. Esses recursos são usados para sites com interfaces de agendamento e sistemas de reserva, como restaurantes.
Os programadores costumam usar JavaScript para adicionar os recursos de data e hora aos seus sites. Isso ocorre porque o JavaScript já possui um recurso integrado para esses aspectos. Neste tutorial, nós iremos explorar o objeto Date em mais detalhes. Falaremos sobre os métodos que você pode usar para configurar as definições ideais para a data e hora no seu site. Também abordaremos como você pode alterar o formato e muito mais.
O que é o Objeto Date?
Como acabamos de mencionar, o JavaScript possui um recurso integrado para data e hora. Ele é chamado de objeto Date . Este objeto permite alterar e gerenciar dados associados para data e hora. Quando você cria uma instância do Date, um novo objeto é criado. Este objeto corresponde às configurações de data e hora do seu computador naquele momento.
Para entender melhor o funcionamento deste objeto, vamos considerar um exemplo. Primeiro, criaremos uma variável. Depois, atribuiremos a ela uma determinada data. Vamos assumir que o dia é quarta-feira e a data é 18 de outubro no fuso horário de Londres (GMT). Dê uma olhada nesta configuração:
|
1 2 3 4 |
// Definir variável para a data e hora atuais const now = new Date(); // Visualizar a saída Now; |
|
1 2 3 |
Saída Wed Oct 18 2017 12:41:34 GMT+0000 (UTC) |
Nossa saída está mostrando uma string de data. Ela consiste nos seguintes dados:
| Dia da semana | Mês | Dia | Ano | Hora | Minuto | Segundo | Fuso horário |
| Wed | Oct | 18 | 2017 | 12 | 41 | 34 | GMT+0000 (UTC) |
O JavaScript recebe os dados por meio de um timestamp. Este timestamp vem do Unix time. Este é um valor que mostra o número de milissegundos decorridos desde 1º de janeiro de 1970 à meia-noite. Para o usuário, a data aparece em um formato compreensível. Se você quiser obter este timestamp, deve usar o método getTime() desta forma:
|
1 2 3 |
// Obter o timestamp atual now.getTime(); |
|
1 2 3 |
Saída 1508330494000 |
Embora este valor pareça confuso, ele representa a mesma coisa que a string de data. É simplesmente 18 de outubro de 2017.
O que é o Epoch Time?
O próximo conceito a aprender é o epoch time. Também é chamado de tempo zero. Você pode entendê-lo melhor como a string de dados
01 Janeiro, 1970 00:00:00 Universal Tempo (UTC) e o 0 timestamp. Para testá-lo, crie uma nova variável. Depois, atribua-a a uma nova instância do
Date em um 0 timestamp:
|
1 2 3 4 5 |
// Atribuir o timestamp 0 a uma nova variável const epochTime = new Date(0); epochTime; |
|
1 2 3 |
Saída 01 Janeiro, 1970 00:00:00 Universal Tempo (UTC) |
O epoch time costumava ser o padrão para os programadores. Também é o método que o JavaScript usa para medir o tempo.
Formatos para Criação de Datas em JavaScript
Agora que sabemos como criar uma nova instância do Date com uma string e timestamp, podemos falar sobre os diferentes formatos. Existem quatro formatos que são detalhados a seguir:
Isso significa que é possível mencionar datas e horas específicas conforme necessário. Você também pode simplesmente usar uma string de dados ou timestamp, como discutimos anteriormente. Para sua compreensão, observaremos como criar novos objetos Date de três maneiras diferentes. Assumindo que nossa data e hora sejam 4 de julho de 1776 às 12:30 pm GMT:
|
1 2 3 4 5 6 7 8 |
// Método Timestamp new Date(-6106015800000); // Método de string de data new Date("July 4 1776 12:30"); // Método de data e hora new Date(1776, 6, 4, 12, 30, 0, 0); |
Como você pode ver, todos os três métodos fornecem a mesma data como saída. Uma diferença é que, se você estiver usando um tempo anterior ao tempo Epoch, o timestamp será exibido com um número negativo. Além disso, os segundos e milissegundos são 0 por padrão no método de data e hora. Se você esquecer de inserir um número, ele também será definido como 0 por padrão.
Outro aspecto confuso é que julho é representado por 6 em vez de 7. Isso ocorre porque a numeração começa com 0. Tenha essas coisas em mente ao criar as instâncias.
Usando o get Comando para Recuperar a Data
Agora que a data está definida, vejamos como você pode acessar seus componentes. Uma maneira é usar o get comando. Esta tabela mostra todos os get métodos para o Date objeto:
Neste exemplo, atribuiremos uma nova data a uma nova variável, 31 de julho de 1980:
|
1 2 |
// Inicializa uma nova instância de aniversário const birthday = new Date(1980, 6, 31); |
É assim que pareceria se você obtivesse todos os componentes individuais da data usando este método:
|
1 2 3 4 5 6 7 8 9 |
birthday.getFullYear(); // 1980 birthday.getMonth(); // 6 birthday.getDate(); // 31 birthday.getDay(); // 4 birthday.getHours(); // 0 birthday.getMinutes(); // 0 birthday.getSeconds(); // 0 birthday.getMilliseconds(); // 0 birthday.getTime(); // 333849600000 (para GMT) |
Em algumas situações, você pode precisar apenas de uma determinada parte da data. Você pode usar esses métodos para fazer isso. Veja como você pode testar para confirmar se é 3 de outubro:
|
1 2 3 4 5 6 7 8 |
// Obtém a data de hoje const today = new Date(); // Compara hoje com 3 de outubro if (today.getDate() === 3 && today.getMonth() === 9) { console.log("É 3 de outubro."); } else { console.log("Não é 3 de outubro."); } |
|
1 2 3 |
Saída Não'é 3 de outubro. |
Essa é a saída que você obteria se a data não fosse 3 de outubro e você testasse contra ela.
Usando o set Comando para Modificar a Data
Semelhante aos comandos get, você tem as contrapartes do comando set . Este comando permite modificar os componentes da data. Esta tabela mostra todos os métodos:
Digamos que queremos alterar a variável birthday de 1997 para 1980:
|
1 2 3 |
// Altera o ano da data de aniversário birthday.setFullYear(1997); birthday; |
|
1 2 3 |
Saída Thu Jul 31 1997 00:00:00 GMT+0000 (UTC) |
Agora nossa saída mostra o novo ano. Você também pode modificar outros componentes da data de maneira semelhante.
Métodos de Data UTC em JavaScript
Se você extrair os componentes da data usando o método get, você os receberá com base nas configurações do sistema local do fuso horário do usuário. Alternativamente, você pode configurá-lo para calcular o tempo com base no padrão UTC. UTC significa Tempo Universal Coordenado. Você pode fazer isso usando o método getUTC. Esta tabela mostra todos os métodos UTC para o objeto Date em JavaScript:
Como você pode ver, todos os métodos são semelhantes aos comandos get . No entanto, as saídas seriam diferentes. Você pode testar a diferença com este código:
|
1 2 3 4 5 6 |
// Atribuir a hora atual a uma variável const now = new Date(); // Imprimir fusos horários local e UTC console.log(now.getHours()); console.log(now.getUTCHours()); |
Este código mostrará a hora atual, bem como a hora no fuso horário UTC. Os números serão os mesmos se você já estiver no fuso horário UTC. O motivo pelo qual você usaria o UTC é que ele permite consistência entre zonas e regiões internacionais.
Conclusão
Abordamos os vários métodos para o objeto Date neste tutorial. Isso incluiu como recuperar os componentes de data com get e como modificá-los com set. Também exploramos os fusos horários UTC e como usá-los em JavaScript.
Por fim, o JavaScript possui uma tonelada de recursos integrados para data e hora. Isso torna a programação de sites complexos bastante simples. Você pode ler mais sobre os recursos de data e hora do JavaScript na Mozilla Developer Network. No entanto, este tutorial deve ajudar você a cobrir as bases em relação aos fundamentos.
Aqui estão mais recursos do nosso blog que tornarão a programação com JavaScript mais fácil:
- JavaScript: um Tutorial sobre Como Indexar, Dividir e Manipular Strings
- Trabalhando com JavaScript: Como Funcionam Protótipos e Heranças
- Um Guia sobre Como Adicionar JavaScript ao HTML
- Uma Visão Geral do Formato de Compartilhamento de Dados JSON
Feliz computação!
Comentários
Nenhum comentário ainda. Seja o primeiro.