Tudo o que você precisa saber sobre a data em JavaScript

A data é estranha em JavaScript. Nos incomoda tanto que buscamos bibliotecas (como Date-fns e Moment ) no momento (ha!) Precisamos trabalhar com data e hora.

Mas nem sempre precisamos usar bibliotecas. A data pode ser bastante simples se você souber o que deve estar atento. Neste artigo, mostrarei tudo o que você precisa saber sobre o objeto Date.

Primeiro, vamos reconhecer a existência de fusos horários.

# Fusos horários

Existem centenas de fusos horários no nosso mundo. Em JavaScript, nos importamos apenas com dois – Hora Local e Tempo Universal Coordenado ( UTC ).

• A hora local refere-se ao fuso horário no qual seu computador está.
• UTC é sinônimo de Greenwich Mean Time ( GMT ) na prática.

Por padrão, quase todo método de data em JavaScript (exceto um) fornece uma data / hora na hora local. Você só recebe o UTC se especificar o UTC .

Com isso, podemos falar sobre a criação de datas.

# Criando uma data

Você pode criar uma data com new Date(). Existem quatro maneiras possíveis de usar new Date():

1. Com uma string de data
2. Com argumentos de data
3. Com um timestamp
4. Sem argumentos

# O método de string de data

No método date-string, você cria uma data passando uma string de data para new Date.

new Date('1988-03-21')

Nós tendemos para o método date-string quando escrevemos datas. Isso é natural porque estamos usando strings de data toda a nossa vida.

Se eu escrevo 21-03-1988, você não tem problemas em deduzir o dia 21 de março de 1988. Sim? Mas se você escrever 21-03-1988em JavaScript, você consegue Invalid Date.

Há uma boa razão para isso.

Nós interpretamos seqüências de datas de maneira diferente em diferentes partes do mundo. Por exemplo, 11-06-2019é 11th June, 2019ou 6th November 2019. Mas você não pode ter certeza de qual deles eu estou me referindo, a menos que você saiba o sistema de data que estou usando.

Em JavaScript, se você quiser usar uma string de data, precisará usar um formato aceito em todo o mundo. Um desses formatos é o formato estendido ISO 8601 .

// ISO 8601 Extended format
`YYYY-MM-DDTHH:mm:ss:sssZ`

Veja o que os valores significam:

• YYYY: Ano de 4 dígitos
• MM: Mês de 2 dígitos (onde janeiro é 01 e dezembro é 12)
• DD: Data de 2 dígitos (0 a 31)
• -: Delimitadores de data
• T: Indica o início do tempo
• HH: Hora de 24 dígitos (0 a 23)
• mm: Minutos (0 a 59)
• ss: Segundos (0 a 59)
• sss: Milissegundos (0 a 999)
• :: Delimitadores de tempo
• Z: Se Zestiver presente, a data será definida como UTC. Se Znão estiver presente, será a hora local. (Isso só se aplica se o tempo for fornecido).

Horas, minutos, segundos e milissegundos são opcionais se você estiver criando uma data. Então, se você quiser criar uma data para11 de junho de 2019, você pode escrever isto:

new Date('2019-06-11')

Preste especial atenção aqui. Há um grande problema em criar datas com strings de data. Você pode identificar o problema se você console.logesta data.

Se você mora em uma área que está por trás do GMT , você receberá uma data que diz 10th June.

Se você mora em uma área que está à frente do GMT , você terá uma data que diz 11th June.

Isso acontece porque o método date-string tem um comportamento peculiar: se você criar uma data (sem especificar a hora), você obtém uma data definida no UTC .

No cenário acima, quando você escreve new Date('2019-06-11'), você realmente cria uma data que diz 11th June, 2019, 12am UTC. É por isso que as pessoas que moram em áreas por trás do GMT recebem um em 10th Junevez de 11th June.

Se você quiser criar uma data na hora local com o método de string de data, precisará incluir a hora. Quando você inclui o tempo, precisa escrever o HHe mmno mínimo (ou o Google Chrome retorna uma data inválida).

new Date('2019-06-11T00:00')

Todo o tempo local versus UTC com strings de data pode ser uma possível fonte de erro que é difícil de entender. Por isso, recomendo que você não crie datas com strings de data.

(A propósito, o MDN avisa sobre a abordagem de string de data, uma vez que os navegadores podem analisar strings de data de maneira diferente).

Se você quiser criar datas, use argumentos ou carimbos de data / hora.

# Criando datas com argumentos

Você pode passar até sete argumentos para criar uma data / hora.

1. Ano: ano de 4 dígitos.
2. Mês: Mês do ano (0-11). Mês é indexado com zero. O padrão é 0 se omitido.
3. Dia: dia do mês (1-31). O padrão é 1 se omitido.
4. Hora: hora do dia (0 a 23). O padrão é 0 se omitido.
5. Minutos: Minutos (0-59). O padrão é 0 se omitido.
6. Segundos: Segundos (0 a 59). O padrão é 0 se omitido.
7. Milissegundos: Milissegundos (0 a 999). O padrão é 0 se omitido.

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

Muitos desenvolvedores (inclusive eu) evitam a abordagem de argumentos porque parececomplicada. Mas na verdade é bem simples.

Tente ler números da esquerda para a direita. À medida que você vai da esquerda para a direita, você insere valores em magnitude decrescente: ano, mês, dia, horas, minutos, segundos e milissegundos.

new Date(2017, 3, 22, 5, 23, 50)

// This date can be easily read if you follow the left-right formula.
// Year: 2017,
// Month: April (because month is zero-indexed)
// Date: 22
// Hours: 05
// Minutes: 23
// Seconds: 50

A parte mais problemática com data é que o valor do mês é zero indexados, como, January === 0, February === 1, March === 2e assim por diante.

Não sabemos por que mês em JavaScript é indexado em zero, mas é. Em vez de discutir por que janeiro deve ser 1 (e não 0), é melhor aceitar que o mês seja indexado com zero em JavaScript. Depois de aceitar esse fato, as datas ficam muito mais fáceis de se trabalhar.

Aqui estão mais alguns exemplos para você se familiarizar:

// 21st March 1988, 12am, Local Time.
new Date(1988, 2, 21)

// 25th December 2019, 8am, Local Time.
new Date(2019, 11, 25, 8)

// 6th November 2023, 2:20am, Local Time
new Date(2023, 10, 6, 2, 20)

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

As datas de aviso criadas com argumentos estão todas no Local Time?

Essa é uma das vantagens de usar argumentos – você não ficará confuso entre o horário local e o UTC. Se você precisar do UTC , crie uma data no UTC desta maneira:

// 11th June 2019, 12am, UTC.
new Date(Date.UTC(2019, 5, 11))

# Criando datas com carimbos de data e hora

Em JavaScript, um registro de data e hora é a quantidade de milissegundos decorridos desde 1º de janeiro de 1970 (1º de janeiro de 1970 é também conhecido como horário Unix epoch). Da minha experiência, você raramente usa timestamps para criar datas. Você só usa timestamps para comparar datas diferentes (mais sobre isso mais tarde).

// 11th June 2019, 8am (in my Local Time, Singapore)
new Date(1560211200000)

# Sem argumentos

Se você criar uma data sem nenhum argumento, obterá uma data definida para a hora atual (na hora local).

new Date()

Você pode dizer pela imagem que é 25 de maio, 11h10 em Cingapura quando escrevi este artigo.

# Resumo sobre como criar datas

1. Você pode criar data com new Date().
2. Existem quatro sintaxes possíveis:
   1. Com uma string de data
   2. Com argumentos
   3. Com timestamp
   4. Sem argumentos
3. Nunca crie uma data com o método de string de data.
4. É melhor criar datas com o método arguments.
5. Lembre-se (e aceite) esse mês é indexado com zero em JavaScript.

Em seguida, vamos falar sobre como converter uma data em uma string legível.

# Formatando uma data

A maioria das linguagens de programação fornece uma ferramenta de formatação para criar qualquer formato de data desejado. Por exemplo, no PHP , você pode escrever date("d M Y")para uma data como 23 Jan 2019.

Mas não há maneira fácil de formatar uma data em JavaScript.

O objeto Date nativo vem com sete métodos de formatação. Cada um desses sete métodos fornece um valor específico (e eles são completamente inúteis).

const date = new Date(2019, 0, 23, 17, 23, 42)

1. toString da-te Wed Jan 23 2019 17:23:42 GMT+0800 (Singapore Standard Time)
2. toDateString da-te Wed Jan 23 2019
3. toLocaleString da-te 23/01/2019, 17:23:42
4. toLocaleDateString da-te 23/01/2019
5. toGMTString da-te Wed, 23 Jan 2019 09:23:42 GMT
6. toUTCString da-te Wed, 23 Jan 2019 09:23:42 GMT
7. toISOString da-te 2019-01-23T09:23:42.079Z

Se você precisar de um formato personalizado, precisará criá-lo você mesmo.

# Escrevendo um formato de data personalizado

Vamos dizer que você quer algo parecido Thu, 23 January 2019. Para criar esse valor, você precisa conhecer (e usar) os métodos de data que vêm com o objeto Date.

Para obter datas, você pode usar estes quatro métodos:

1. getFullYear: Obtém um ano de 4 dígitos de acordo com a hora local
2. getMonth: Obtém o mês do ano (0-11) de acordo com a hora local. Mês é indexado com zero.
3. getDate: Obtém o dia do mês (1-31) de acordo com a hora local.
4. getDay: Obtém o dia da semana (0-6) de acordo com a hora local. Dia da semana começa com domingo (0) e termina com sábado (6).

É simples de criar 23e 2019para Thu, 23 January 2019. Nós podemos usar getFullYeare getDateobtê-los.

const d = new Date(2019, 0, 23)
const year = d.getFullYear() // 2019
const date = d.getDate() // 23

É mais difícil de conseguir Thue January.

Para obter January, você precisa criar um objeto que mapeie o valor de todos os doze meses para seus respectivos nomes.

const months = {
  0: 'January',
  1: 'February',
  2: 'March',
  3: 'April',
  4: 'May',
  5: 'June',
  6: 'July',
  7: 'August',
  8: 'September',
  9: 'October',
  10: 'November',
  11: 'December'
}

Como Month é indexado como zero, podemos usar uma matriz em vez de um objeto. Produz os mesmos resultados.

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

Para obter January, você precisa:

1. Use getMonthpara obter o mês com índice zero a partir da data.
2. Obter o nome do mês de months

const monthIndex = d.getMonth()
const monthName = months[monthIndex]
console.log(monthName) // January

A versão condensada:

const monthName = months(d.getMonth())
console.log(monthName) // January

Você faz o mesmo para conseguir Thu. Desta vez, você precisa de um array que contenha sete dias da semana.

const days = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]

Então você:

1. Fique dayIndexcomgetDay
2. Use dayIndexpara obterdayName

const dayIndex = d.getDay()
const dayName = days[dayIndex] // Thu

Versão curta:

const dayName = days[d.getDay()] // Thu

Em seguida, você combina todas as variáveis ​​criadas para obter a string formatada.

const formatted = `${dayName}, ${date} ${monthName} ${year}`
console.log(formatted) // Thu, 23 January 2019

Sim, é tedioso. Mas não é impossível quando você pega o jeito.

Se você precisar criar um horário personalizado, use os seguintes métodos:

1. getHours: Obtém horas (0-23) de acordo com a hora local.
2. getMinutes: Obtém os minutos (0 a 59) de acordo com a hora local.
3. getSeconds: Obtém segundos (0 a 59) de acordo com a hora local.
4. getMilliseconds: Obtém-se milissegundos (0 a 999), de acordo com a hora local.

Em seguida, vamos falar sobre a comparação de datas.

# Comparando datas

Se você quiser saber se uma data vem antes ou depois de outra data, você pode compará-los diretamente com >, <, >=e <=.

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier < later) // true

É mais difícil se você quiser verificar se duas datas caem exatamente ao mesmo tempo. Você não pode compará-los com ==ou ===.

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false

Para verificar se duas datas caem exatamente ao mesmo tempo, você pode verificar seus timestamps com getTime.

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true

Se você quiser verificar se duas datas caem no mesmo dia, você pode verificar suas getFullYear, getMonthe getDatevalores.

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate()=== b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10am
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
console.log(isSameDay(a, b)) // true

Há uma última coisa que temos que cobrir.

# Obtendo uma data a partir de outra data

Existem dois cenários possíveis em que você deseja obter uma data a partir de outra data.

1. Defina um valor de data / hora específico a partir de outra data.
2. Adicionar / subtrair um delta de outra data.

# Definir uma data / hora específica

Você pode usar esses métodos para definir uma data / hora a partir de outra data:

1. setFullYear: Definir ano de 4 dígitos na hora local.
2. setMonth: Definir mês do ano na hora local.
3. setDate: Definir o dia do mês na hora local.
4. setHours: Definir horas na hora local.
5. setMinutes: Definir minutos na hora local.
6. setSeconds: Definir segundos na hora local.
7. setMilliseconds: Definir milissegundos na hora local.

Por exemplo, se você deseja definir uma data para os 15 ^th do mês, você pode usar setDate(15).

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 15 January 2019

Se você quiser definir o mês para junho, você pode usar setMonth. (Lembre-se, mês em JavaScript é zero-indexado!)

const d = new Date(2019, 0, 10)
d.setMonth(5)

console.log(d) // 10 June 2019

Nota: Os métodos setter acima alteram o objeto de data original. Na prática, não devemos mudar objetos ( mais sobre por que aqui ). Devemos realizar essas operações em um novo objeto de data.

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 10 January 2019
console.log(newDate) // 10 June 2019

# Adicionando / subtraindo delta de outra data

Um delta é uma mudança. Ao adicionar / subtrair delta de outra data, quero dizer: você deseja obter uma data que seja X de outra data. Pode ser X ano, X mês, X dia, etc.

Para obter um delta, você precisa saber o valor da data atual. Você pode obtê-lo usando estes métodos:

1. getFullYear: Obtém um ano de 4 dígitos de acordo com a hora local
2. getMonth: Obtém o mês do ano (0-11) de acordo com a hora local.
3. getDate: Obtém o dia do mês (1-31) de acordo com a hora local.
4. getHours: Obtém horas (0-23) de acordo com a hora local.
5. getMinutes: Obtém os minutos (0 a 59) de acordo com a hora local.
6. getSeconds: Obtém segundos (0 a 59) de acordo com a hora local.
7. getMilliseconds: Obtém-se milissegundos (0 a 999), de acordo com a hora local.

Existem duas abordagens gerais para adicionar / subtrair um delta. A primeira abordagem é mais popular no Stack Overflow. É conciso, mas mais difícil de entender. A segunda abordagem é mais detalhada, mas mais fácil de entender.

Vamos percorrer as duas abordagens.

Digamos que você queira marcar uma data de três dias a partir de hoje. Para este exemplo, vamos supor também hoje é28 de março de 2019. (É mais fácil explicar quando estamos trabalhando com uma data fixa).

A primeira abordagem (a abordagem definida)

// Assumes today is 28 March 2019
const today = new Date(2019, 2, 28)

Primeiro, criamos um novo objeto Date (para não alterar a data original)

const finalDate = new Date(today)

Em seguida, precisamos saber o valor que queremos mudar. Já que estamos mudando dias, podemos começar o dia com getDate.

const currentDate = today.getDate()

Queremos uma data de três dias a partir de hoje. Vamos usar adicionar o delta (3) à data atual.

finalDate.setDate(currentDate + 3)

Código completo para a abordagem definida:

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate() + 3)

console.log(finalDate) // 31 March 2019

A segunda abordagem (a nova abordagem de data)

Aqui, usamos getFullYear, getMonth, getDatee outros métodos getter até atingirmos o tipo de valor que deseja alterar. Então, usamos criar a data final com new Date.

const today = new Date(2019, 2, 28)

// Getting required values
const year = today.getFullYear()
const month = today.getMonh()
const day = today.getDate()

// Creating a new Date (with the delta)
const finalDate = new Date(year, month, day + 3)

console.log(finalDate) // 31 March 2019

Ambas as abordagens funcionam. Escolha um e fique com ele.

# Correção automática de data

Se você fornecer a Data com um valor que esteja fora de seu intervalo aceitável, o JavaScript recalculará automaticamente a data para você.

Aqui está um exemplo. Digamos que nós definimos a data para33 de março de 2019. (Não há 33 ^rd de março no calendário). Neste caso, JavaScript ajusta 33 ^rd Março a 2 ^nd abril automaticamente.

// 33rd March => 2nd April
new Date(2019, 2, 33)

Isso significa que você não precisa se preocupar com o cálculo de minutos, horas, dias, meses etc. ao criar um delta. JavaScript lida com isso automaticamente.

// 33rd March => 2nd April
new Date(2019, 2, 30 + 3)

E isso é tudo que você precisa saber sobre o objeto Date nativo do JavaScript.

# Interessado em aprender mais JavaScript?

Se você achou útil essa introdução, pode adorar Aprender JavaScript , um curso que criei para ensinar às pessoas tudo o que elas precisam saber sobre JavaScript.

No curso, eu abordo os conceitos básicos do que você precisa saber, então eu mostro a você como usar os conceitos aprendidos para construir componentes do mundo real.

Dar uma olhada. Você pode achar útil.

Enquanto isso, se você tiver alguma dúvida sobre JavaScript, sinta-se à vontade para entrar em contato comigo . Farei o melhor para criar artigos gratuitos para responder às suas perguntas.