Aprenda a trabalhar com data e hora em JavaScript
Em teoria, lidar com datas como um desenvolvedor é tão simples quanto criar, armazenar e, se necessário, manipular datas. Mas, como desenvolvedor Javascript, você sabe que essa teoria não se mantém por muito tempo depois de começar a trabalhar com datas reais. Além dos diferentes formatos de data e hora, você deve considerar as diferenças de fuso horário e local.
Por esse motivo, muitos desenvolvedores de Javascript procuram a ajuda de bibliotecas de terceiros quando precisam gerenciar datas em um aplicativo. Embora essas bibliotecas reduzam a complexidade da tarefa, ter um entendimento claro de como lidar com datas de Javascript vanilla tem seus benefícios.
Este tutorial irá apresentá-lo a trabalhar com datas no Javascript vanilla, bem como bibliotecas úteis de terceiros para ajudá-lo a simplificar tarefas mais complexas relacionadas a datas.
Objeto Javascript Date
O objeto Date em Javascript é o elemento principal quando se trata de manipulação de data e hora. Ele registra um único ponto no tempo conforme o número dos milissegundos decorridos desde 1º de janeiro de 1970 00:00:00 (UTC). Essa combinação de data e hora é conhecida como hora da época. No que diz respeito ao Javascript, é o começo dos tempos no mundo.
Criação de datas
Você pode simplesmente criar uma data usando new Date(). Você pode passar parâmetros para o construtor Date para criar uma data de sua escolha. O parâmetro fornecido pode assumir diferentes formas.
Passe uma string de data
Você pode passar uma string de data de um formato aceito ao criar um novo objeto Date.
const date = new Date("2020-12-31");
Agora, se imprimirmos a data de criação, mostra isso.
Thu Dec 31 2020 01:00:00 GMT+0100 (Central European Standard Time)
Além da data que passamos, o objeto de data tem mais valores, incluindo um horário e um fuso horário. Como não demos um valor específico para esses parâmetros ao criar o objeto, o Javascript usa a hora local e o fuso horário do sistema do código.
Se quisermos passar o tempo ou fuso horário com a string de parâmetro, podemos usar um formato como este.
AAAA-MM-DDTHH: mm: ss.sssZ
- AAAA: ano
- MM: mês (1 a 12)
- DD: data (1 a 31)
- HH: hora no formato de 24 horas (0 a 23)
- mm: minutos (0 a 59)
- ss: segundos (00 a 59)
- sss: milissegundos (0 a 999)
- T é usado para separar a data e hora na string
- Se Z estiver presente, a hora será considerada em UTC. Caso contrário, assume a hora local.
No entanto, se T e Z não estiverem presentes, a data de criação da string pode dar resultados diferentes em navegadores diferentes. Nesse caso, para ter sempre o mesmo fuso horário para a data, adicione +HH:mmou -HH:mmao final.
let newDate = new Date("2021-09-23T23:45Z")
// Fri Sep 24 2021 01:45:00 GMT+0200 (Central European Summer Time)
newDate = new Date("2021-09-23T23:45");
// Thu Sep 23 2021 23:45:00 GMT+0200 (Central European Summer Time)
newDate = new Date("2021-09-23T23:45+05:30")
// Thu Sep 23 2021 20:15:00 GMT+0200 (Central European Summer Time)
Você pode obter os mesmos resultados usando a Date.parsefunção em vez de passar a string de data para o construtor Date. Date.parseestá sendo indiretamente chamado dentro do construtor sempre que você passa uma string de data.
O formato usado nessas strings é o formato estendido de calendário ISO 8601. Você pode consultar seus detalhes na especificação ECMAScript .
Passar argumentos de data
Você pode passar diretamente os argumentos de data para o construtor Date sem usar strings de data confusas. A ordem e a duração de cada ano, mês, etc., são exatamente como em uma string de data.
let newDate = new Date(1998, 9, 30, 13, 40, 05);
Quando inspecionamos o resultado da data de criação, podemos notar uma diferença crucial na data final.
Fri Oct 30 1998 13:40:05 GMT+0100 (Central European Standard Time)
O que é estranho? Quando criamos a data, usamos 9 para o mês, que poderíamos supor ser setembro. No entanto, quando imprimimos o resultado, o mês é outubro. Por que é que?
Javascript usa um índice baseado em zero para identificar cada mês em um ano. Isso significa que, para Javascript, janeiro é representado por 0 em vez de 1. Da mesma forma, outubro é representado por 9 em vez de 10.
Neste método de criação de uma data, não podemos passar um argumento para indicar seu fuso horário. Portanto, o padrão é a hora local do sistema. Mas podemos usar a Date.UTCfunção para converter a data em UTC antes de passá-la para o construtor Date.
newDate = new Date(Date.UTC(1998, 09, 30, 13, 40, 05))
// Fri Oct 30 1998 14:40:05 GMT+0100 (Central European Standard Time)
Passe um carimbo de data / hora
Lembra que mencionei que o Javascript armazena o tempo decorrido desde a época no objeto Date? Podemos passar esse valor de tempo decorrido, chamado de carimbo de data / hora, para indicar a data que estamos criando.
newDate = new Date(1223727718982)
// Sat Oct 11 2008 14:21:58 GMT+0200 (Central European Summer Time)
Crie um objeto Date para a data e hora atuais
Se você deseja criar um objeto Date para a data e hora atuais do sistema, use o construtor Date sem passar nenhum argumento.
let now = new Date()
// Sat Jan 09 2021 22:06:33 GMT+0100 (Central European Standard Time)
Você também pode usar a Date.now()função para a mesma tarefa.
now = Date.now()
Formatando datas
Javascript fornece várias funções integradas para formatar uma data. No entanto, essas funções apenas convertem a data para um formato específico para cada uma.
Vamos ver como funciona cada função de formatação.
let newDate = new Date("2021-01-09T14:56:23")
newDate.toString()
// "Sat Jan 09 2021 14:56:23 GMT+0100 (Central European Standard Time)"
newDate.toDateString()
// "Sat Jan 09 2021"
newDate.toLocaleDateString()
// "1/9/2021"
newDate.toLocaleTimeString()
// "2:56:23 PM"
newDate.toLocaleString()
// "1/9/2021, 2:56:23 PM"
newDate.toGMTString()
// "Sat, 09 Jan 2021 13:56:23 GMT"
newDate.toUTCString()
// "Sat, 09 Jan 2021 13:56:23 GMT"
newDate.toISOString()
// "2021-01-09T13:56:23.000Z"
newDate.toTimeString()
// "14:56:23 GMT+0100 (Central European Standard Time)"
newDate.getTime()
// 1610200583000
API de internacionalização
A API de internacionalização ECMAScript permite a formatação de uma data em um local específico usando o objeto Intl.
let newDate = new Date("2021-01-09T14:56:23")
//format according to the computer's default locale
Intl.DateTimeFormat().format(newDate)
// "1/9/2021"
//format according to a specific locale, e.g. de-DE (Germany)
Intl.DateTimeFormat("de-DE").format(newDate)
// "9.1.2021"
Você pode passar um objeto de opções para a função DateTimeFormat para exibir valores de hora e personalizar a saída.
let options = {
year: "numeric",
month: "long",
weekday: "long",
hour: "numeric",
minute: "numeric",
}
Intl.DateTimeFormat("en-US", options).format(newDate)
// "January 2021 Saturday, 2:56 PM"
Formatos de data personalizados
Se você quiser formatar a data para qualquer outro formato além do que essas funções fornecem, você terá que fazer isso acessando cada parte da data separadamente e combinando-as.
Javascript fornece as seguintes funções para recuperar o ano, mês, data e dia de um objeto Date.
newDate.getFullYear() // 2021
newDate.getMonth() // 0 (zero-based index)
newDate.getDate() // 9
newDate.getDay() // 6 (zero-based index starting from Sunday)
newDate.getHours() // 14
newDate.getMinutes() // 56
newDate.getUTCHours() // 9
newDate.getUTCDate() // 9
Agora, você pode converter a data em um formato personalizado usando as partes recuperadas.
Atualizando datas
Javascript fornece vários métodos para editar uma data já criada.
newDate = new Date("2021-01-08T22:45:23")
newDate.setYear(1998)
//Thu Jan 08 1998 22:45:23 GMT+0100 (Central European Standard Time)
newDate.setMonth(4)
//Fri May 08 1998 22:45:23 GMT+0200 (Central European Summer Time)
newDate.setDate(12)
//Tue May 12 1998 22:45:23 GMT+0200 (Central European Summer Time)
newDate.setHours(12)
newDate.setMinutes(21)
newDate.setUTCDate(26)
newDate.setUTCMinutes(56)
Comparando datas
Se quiser saber se uma data específica vem antes de outra, você pode usar os operadores maior que e menor que diretamente para comparação.
let first = new Date(2010, 3, 19)
let second = new Date(2010, 3, 24)
first > second //false
No entanto, se você quiser verificá-los quanto à igualdade, nem o operador == nem === funciona como esperado.
first = new Date(2009, 12, 23)
second = new Date(2009, 12, 23)
console.log(first == second) // false
console.log(first === second) // false
Em vez disso, você deve recuperar o carimbo de data / hora de cada data e compará-los para igualdade.
first.getTime() === second.getTime() // true
Isso ocorre porque as datas em JavaScript são objetos, portanto, cada data tem uma instância diferente da classe e o operador ==ou ===está comparando o endereço da memória em vez dos valores reais das datas.
Bibliotecas de manipulação de data Javascript
Podemos encontrar várias bibliotecas Javascript de manipulação de data e hora como projetos de código aberto ou outros. Alguns deles, projetados para todos os tipos de manipulação de data e hora, e alguns têm um conjunto específico de casos de uso. Nesta seção, falarei apenas sobre bibliotecas multifuncionais populares.
Moment.js costumava ser o rei das bibliotecas de manipulação de data entre os desenvolvedores de Javascript. No entanto, seus desenvolvedores anunciaram recentemente que está se concentrando em manter a base de código atual em vez de adicionar novos recursos. Eles recomendam procurar uma solução alternativa para quem está trabalhando em novos projetos.
Então, além de Moment.js, quais são as bibliotecas que podemos usar para tornar nossa vida mais fácil como desenvolvedores?
Date-fns
Date-fns em uma biblioteca de código aberto com suporte para análise e formatação de datas, localidades e aritméticas de data como adição e subtração. É apelidado de Lodash para datas devido à sua versatilidade.
const datefns = require("date-fns");
let date = datefns.format(new Date(2017, 09, 12), "dd MMM yyyy");
date = datefns.format(new Date(2017, 09, 12), "dd.MM.yy");
Como você pode ver, você pode facilmente converter uma data em seu formato preferido, passando uma string de formatação simples.
Também nos permite adicionar e subtrair datas facilmente.
let date = new Date(2019, 09, 22)
let newDate1 = datefns.addDays(date, 21)
let newDate2 = datefns.addYears(date, 2)
let newDate3 = datefns.subMonths(date, 3)
console.log(datefns.format(newDate1, 'dd/MM/yyyy')) // 12/11/2019
console.log(datefns.format(newDate2, 'dd/MM/yyyy')) // 22/10/2021
console.log(datefns.format(newDate3, 'dd/MM/yyyy')) // 22/07/2019
Luxon
Luxon é uma biblioteca de manipulação de data e hora criada por um dos desenvolvedores do Moment.js para atender aos requisitos de aplicativos modernos. Semelhante ao Date-fns, o Luxon oferece formatação de dados e funções de análise. Além disso, tem suporte internacional nativo e pode ser encadeado.
let date = DateTime.local(2019, 08, 12)
console.log(date.toLocaleString(DateTime.DATETIME_FULL))
console.log(date.toLocaleString(DateTime.DATETIME_MED))
Você também pode medir o intervalo de tempo entre duas datas.
let now = DateTime.local()
let later = DateTime.local(2021, 03, 12)
console.log(Interval.fromDateTimes(now, later).length('years'))