Introdução aos formatos de data JavaScript

Uma data é um objeto interno em JavaScript e armazena data e hora e é usada para armazenar, criar e modificar horas, medir hora ou exibir a data atual com ou sem o componente 'hora' em vários formatos, conforme desejado. Ele também fornece várias funções ou métodos para brincar.

A instância JavaScript Date representa um momento no formato independente da plataforma. O objeto Data carrega ambos, a parte da data e a parte da hora. ISO 8601 (AAAA-MM-DD) é o padrão internacional para a apresentação de data e hora e o formato de data preferido em JavaScript. Além disso, os objetos Date contêm um número que representa a data e a hora em milissegundos desde 1 de janeiro de 1970 UTC, dependendo do valor fornecido ao objeto Date.

Sintaxe

Para definir um novo objeto Date, precisamos chamar um novo Date () com uma das seguintes opções:

new Date();
new Date(value);
new Date(dateString);
new Date(year, month index (, day (, hours (, minutes (, seconds (, milliseconds))))));

Precisamos usar o novo operador para instanciar um objeto Date. Se usarmos o objeto Date diretamente, como now = Date (), o valor retornado será uma string em vez de um objeto Date.

Quando nenhum argumento é fornecido, o objeto Data exibe a data e hora atuais. Por padrão, o objeto Data em JavaScript exibe a data / hora no horário local.

Exemplos de formatos de data JavaScript

Vamos ver com a ajuda de alguns exemplos abaixo:

Exemplo 1

Exibir data e hora atuais

Código



JS Dates

var current_date = new Date();
document.getElementById("display").innerHTML = current_date;



JS Dates

var current_date = new Date();
document.getElementById("display").innerHTML = current_date;



JS Dates

var current_date = new Date();
document.getElementById("display").innerHTML = current_date;

Resultado:

Formatos de data

As várias maneiras pelas quais podemos formatar a data em JavaScript são:

  • Data ISO (Padrão Internacional) - “2019-11-06”
  • Data Longa - "12 de novembro de 2019" ou "12 de novembro de 2019"
  • Data curta - “11/12/2019”

Exemplo 2

Exibir datas em vários formatos

Código



JS Dates

const months = ("JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC");
var current_date = new Date();
console.log("ISO Format: ", current_date.getFullYear()+"-"+current_date.getMonth()+"-"+current_date.getDate())
console.log("Long Format: ", current_date.getDate()+" "+months(current_date.getMonth())+" "+current_date.getFullYear())
console.log("Short Format: ", current_date.getDate()+"-"+current_date.getMonth()+"-"+current_date.getFullYear())



JS Dates

const months = ("JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC");
var current_date = new Date();
console.log("ISO Format: ", current_date.getFullYear()+"-"+current_date.getMonth()+"-"+current_date.getDate())
console.log("Long Format: ", current_date.getDate()+" "+months(current_date.getMonth())+" "+current_date.getFullYear())
console.log("Short Format: ", current_date.getDate()+"-"+current_date.getMonth()+"-"+current_date.getFullYear())



JS Dates

const months = ("JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC");
var current_date = new Date();
console.log("ISO Format: ", current_date.getFullYear()+"-"+current_date.getMonth()+"-"+current_date.getDate())
console.log("Long Format: ", current_date.getDate()+" "+months(current_date.getMonth())+" "+current_date.getFullYear())
console.log("Short Format: ", current_date.getDate()+"-"+current_date.getMonth()+"-"+current_date.getFullYear())

Resultado:

A partir do código acima, podemos ver que a parte do mês da data começa em zero, ou seja, janeiro é o mês zero. O mesmo vale para a parte do dia (getDay ()), o domingo começa do zero.

Quando especificamos a data no formato de string no objeto Date, tendemos a escrever como "12-11-2019" (12 de novembro de 2019), mas no JavaScript, especificar a data nesse formato gera um valor de data errado.

Exemplo 3

A data errada exibida

Código



JS Dates

var current_date = new Date('12-11-2019');
document.getElementById("display").innerHTML = current_date;



JS Dates

var current_date = new Date('12-11-2019');
document.getElementById("display").innerHTML = current_date;



JS Dates

var current_date = new Date('12-11-2019');
document.getElementById("display").innerHTML = current_date;

Resultado:

Agora, exibiremos a data e hora em milissegundos usando a função Date.parse (). Essa função obtém o número exato de milissegundos que passaram desde a meia-noite de 1º de janeiro de 1970 até a data fornecida.

Exemplo 4

Data em milissegundos

Código



var msec_date = Date.parse('12-11-2019');
console.log("Date in Milli-Seconds:", msec_date)

Resultado:

A coisa boa sobre o objeto Data do JavaScript é que, se fornecermos um valor que não caia em um intervalo aceitável, o JavaScript recalcula a data automaticamente para produzir um valor de data aceitável. Vamos considerar um exemplo:

Exemplo 5

Correção automática do valor da data

Código



var autocorrect_date = new Date(2019, 9, 46);
console.log("Date Value:", autocorrect_date)

Resultado:

O exemplo de código acima recalcula o valor fornecido e exibe um valor de data correto e aceitável. Além disso, se observarmos a seção de código de como o valor dos dados é fornecido, parece que podemos quebrar a parte do valor de data e hora e apresentá-la como números individuais separados por vírgula. O valor "9" representa o mês de outubro, conforme discutido na seção anterior deste artigo, que a parte do mês da data começa em 0 (janeiro = 0, fevereiro = 1 e assim por diante ..)

Conclusão

Neste artigo, aprendemos o objeto de data JavaScript e entendemos vários formatos de data e hora que podem ser exibidos em JavaScript usando métodos internos de data e hora. Uma das práticas recomendadas é criar datas com o método de argumentos e evitar o uso do método de sequência de datas.

Artigos recomendados

Este é um guia sobre formatos de data JavaScript. Aqui discutimos a introdução ao JavaScript, juntamente com exemplos apropriados. Você também pode consultar nossos outros artigos sugeridos para saber mais:

  1. Segurança de aplicativos da Web
  2. O que é o WebSocket?
  3. O que é o ASP.Net Web Services?
  4. O que é o Selenium Web Driver?

Categoria:

Desenvolvimento de software