Resultado de imagem para date() javascript

Neste tutorial vamos mostrar como obter datas com o JavaScrpt através do objeto Date(). Este objeto traz vários métodos para obter partes da data e hora.

Neste tutorial vamos mostrar como obter data e hora usando o objeto Date() do Javascript.

Instanciar o objeto Date()

Para utilizarmos o objeto Date() precisamos primeiro instanciar o objeto. Veja no exemplo abaixo como fazemos isso:

var data = new Date();

Observação: Quando você cria uma instância do objeto Date() sem especificar uma data, ela retorna um valor que representa a data e a hora atuais, incluindo ano, mês, dia, hora, minuto, segundo e milissegundo.  Em seguida, será possível ler ou modificar os valores de data e hora através dos métodos do objeto:

Métodos do objeto Date()

O objeto Date() não possui propriedades, mas por outro lado, possui vários métodos. Veja a seguir alguns dos seus principais métodos:

getDate() Retorna o dia do mês (de 1-31)
getDay() Retorna o dia da semana (de 0-6) - (zero = domingo)
getFullYear() Retorna o ano - (4 dígitos)
getHours() Retorna a hora (de 0-23)
getMilliseconds() Retorna milisegundos (de 0-999)
getMinutes() Retorna os minutos (de 0-59)
getMonth() Retorna o mês (de 0-11) - (zero = janeiro)
getSeconds() Retorna os segundos (de 0-59)
getTime() Retorna o número de milisegundos desde 01/01/1970 e especifica a data
getTimezoneOffset() Retorna a diferença do tempo entre UTC Time e local time, em minutos
now() Retorna o número de milisegundos desde 01/01/1970
parse() Analisa uma string de data e retorna os milisegundos desde 01/01/1970
setDate() Atualiza o dia do mês
setFullYear() Atualiza o ano
setHours() Atualiza a hora
setMilliseconds() Atualiza os milisegundos
setMinutes() Atualiza os minutos
setMonth() Atualiza o mês
setSeconds() Atualiza os segundos
setTime() Atualiza o número de milisegundos desde 01/01/1970
toString() Converte uma data em uma string

Aplicações

Exemplo 1: Obtendo data atual e data específica

No exemplo abaixo, ao clicar no botão será informada a data e hora atuais e data e hora específicas, 08/03/1962 12:30, no padrão do JavaScript.

<script>
// Obtém a data/hora atual e específica
var data = new Date();
var data_esp = new Date('03/08/1962 12:30');

//função para mostrar o resultado
function resultado() {
document.getElementById("demo").innerHTML = data;
document.getElementById("demo1").innerHTML = data_esp;
}
</script>

Obs.: Quando você cria uma instância do objeto Date() sem especificar uma data, ela retorna um valor que representa a data e a hora atual. 

Tente você mesmo » 

Veja o resultado abaixo:

Exemplo 2: Utilizando métodos do objeto Date()

No exemplo abaixo, ao clicar no botão será informada a data e hora atual atualizada no padrão que definimos através dos métodos do objeto Date().

<script>
//função para mostrar o resultado
function resultado() {

	// Obtém a data/hora atual
    var data = new Date();

    // Guarda cada parte em uma variável
    var dia = data.getDate(); // 1-31
    var dia_sem = data.getDay(); // 0-6 (zero=domingo)
    var mes = data.getMonth(); // 0-11 (zero=janeiro)
    var ano4 = data.getFullYear(); // 4 dígitos
    var hora = data.getHours(); // 0-23
    var min = data.getMinutes(); // 0-59
    var seg = data.getSeconds(); // 0-59

    // Formata a data e a hora (note o mês + 1)
    var data_atual = dia + '/' + (mes+1) + '/' + ano4;
    var hora_atual = hora + ':' + min + ':' + seg;

    // Mostra resultado no id = "demo"
    var x = document.getElementById("demo");
    x.innerHTML = 'Hoje é ' + data_atual + ' às ' + hora_atual;
    x.style.color = "#0000FF";
}
</script>

Veja o resultado abaixo:

Exemplo 3: Criando e manipulando padrões de datas (dias da semana e meses)

No exemplo abaixo, ao clicar no botão será informada a data atual atualizada com dia da semana e mês descritos por extenso.

<script>
//função para mostrar o resultado
function resultado() {
    // Obtém a data/hora atual
    var data = new Date();

    var mesExtenso = Array("Janeiro", "Fevereiro", "Março", 
    "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", 
    "Outubro", "Novembro", "Dezembro");

    var diaSemanaExtenso = Array("Domingo", "Segunda-Feira","Terceira-Feira",
    "Quarta-Feira","Quinta-Feira",
    "Sexta-Feira", "Sábado");

    // Guarda cada parte em uma variável
    var dia = data.getDate(); // 1-31
    var dia_sem = data.getDay(); // 0-6 (zero=domingo)
    var mes = data.getMonth(); // 0-11 (zero=janeiro)
    var ano4 = data.getFullYear(); // 4 dígitos
    var hora = data.getHours(); // 0-23
    var min = data.getMinutes(); // 0-59
    var seg = data.getSeconds(); // 0-59s

    // Formata a data e a hora (note o mês + 1)
    var data_atual = diaSemanaExtenso[dia_sem] + ', ' + dia + ' de '+  mesExtenso[mes] + ' de ' + ano4;
    var hora_atual = hora + ':' + min + ':' + seg;
    var x = document.getElementById("demo");
    x.innerHTML = 'Hoje é ' +  data_atual + ' às ' + hora_atual;
    x.style.color = "#0000FF";
}
</script>

Tente você mesmo »

Veja o resultado abaixo:

Exemplo 4: Criando data com atualização automática

No exemplo abaixo, vamos apresentar um exemplo com data e hora atualizadas automaticamente a cada segundo:

<script>
//função para mostrar o resultado
function resultado() {
    // Obtém a data/hora atual
    var data = new Date();

    var mesExtenso = Array("Janeiro", "Fevereiro", "Março", 
    "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", 
    "Outubro", "Novembro", "Dezembro");

    var diaSemanaExtenso = Array("Domingo", "Segunda-Feira",
    "Terceira-Feira","Quarta-Feira","Quinta-Feira",
    "SextaFeira", "Sábado");

    // Guarda cada parte em uma variável
    var dia = data.getDate(); // 1-31
    var dia_sem = data.getDay(); // 0-6 (zero=domingo)
    var mes = data.getMonth(); // 0-11 (zero=janeiro)
    var ano4 = data.getFullYear(); // 4 dígitos
    var hora = data.getHours(); // 0-23
    var min = data.getMinutes(); // 0-59
    var seg = data.getSeconds(); // 0-59s

    // Formata a data e a hora (note o mês + 1)
    var data_atual = diaSemanaExtenso[dia_sem] + ', ' + dia + ' de '+  mesExtenso[mes] + ' de ' + ano4;
    var hora_atual = hora + ':' + min + ':' + seg;
    var x = document.getElementById("demo");
    x.innerHTML = hora_atual + ' - ' +  data_atual;
    x.style.color = "#0000FF";
    setTimeout("resultado()",1000); //reinicia a função a cada 1 segundo
}
</script>

Tente você mesmo »

Veja o resultado abaixo:

Documentação Oficial

1. [Objeto Date()] » Referência W3Scholl.

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

Compartilhe:

Área do Usuário

Doações

Por favor, ajude o nosso site a se manter online :)

 Obrigado!
Angelo Luis Ferreira
angelo.alf@gmail.com

Produzido por:

Topo