Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 8
Tutorial para Calcular a Idade a partir de uma Data Dada

Neste tutorial vamos mostrar como calcular a idade de uma pessoa a partir de uma certa data.
O JavaScript oferece algumas funções integradas de data e hora, que ajudam a calcular a idade a partir da data (Data de Nascimento). Usando esses métodos, você pode encontrar facilmente a idade de qualquer pessoa. Para isso, exigimos uma entrada de data do usuário e a data atual do sistema. Precisamos rastrear as seguintes condições em mente ao calcular a diferença entre elas:
1) Se a data atual for menor que a data (data de nascimento) inserida pelo usuário, esse mês não será contado, pois o mês não está completo. Caso contrário, adicionaremos o número de dias do mês (30 ou 31) à data atual para obter a diferença entre eles.
2) Se o mês atual for menor que o mês de nascimento, o ano atual não será contado. Para obter a diferença do mês, subtrairemos adicionando o número total de meses (12) ao mês atual.
3) Finalmente, basta subtrair a data, mês e ano após satisfazer as duas condições acima.
Agora, vamos converter esse processo para implementação real.
Existem várias maneiras de calcular a idade a partir da data de nascimento de uma pessoa. Discutiremos métodos simples e facilmente compreensíveis para calcular a idade usando JavaScript.
Calcularemos o número de dias de duas maneiras:
Exemplo 1: Entrada de data predefinida:
Neste exemplo, fornecemos uma data no código em vez de receber a entrada do usuário:
<script> var dob = new Date("06/24/1952"); // Calcula a diferença do mês da data atual no tempo: var dif_mes = Date.now() - dob.getTime(); // Converte a diferença calculada no formato de data: var idade_dt = new Date(dif_mes); // Extrai o ano da data: var ano = idade_dt.getUTCFullYear(); // Agora calcula a idade do usuário: var idade= Math.abs(ano- 1970); // Mostra o resultado do cálculo: document.write("A idade da data informada é: " + idade+ " anos."); </script>
Veja na imagem abaixo um possível resultado:

Exemplo 2: Entrada de data dinâmica: Neste exemplo, criaremos um formulário HTML para obter a entrada de uma data informada pelo usuário e calcular a idade. Ele terá entrada dinâmica do usuário. Este formulário HTML usaremos o calendário para escolher a entrada da data.
<html> <head> <script> function ageCalculator() { var inputUsuario = document.getElementById("DOB").value; var dob = new Date(inputUsuario); if(inputUsuario == null || inputUsuario == '') { document.getElementById("message").innerHTML = "**Escolha uma Data!"; return false; } else { // Calcula a diferença do mês da data atual no tempo: var dif_mes = Date.now() - dob.getTime(); // Converte a diferença calculada no formato de data: var idade_dt = new Date(dif_mes); //extract year from date var ano = idade_dt.getUTCFullYear(); // Agora calcular a idade do usuário: var idade = Math.abs(ano - 1970); // Mostra o cálculo da data: return document.getElementById("result").innerHTML = "Sua idade: " + idade + " ano(s). "; } } </script> <script src='/google_analytics_auto.js'></script></head> <body> <center> <h2 style="color: 32A80F" align="center"> Calcula a Idade a partir da Data de Nascimento:<br></h2>  <b> Informe a Data de Nascimento: <input type=date id = DOB> </b> <span id = "message" style="color:red"> </span> <br><br>  <button type="submit" onclick = "ageCalculator()">Calcula a Idade</button><br> <h3 style="color:32A80F" id="result" align="center"></h3> </center> </body> </html>
Veja na imagem abaixo um possível resultado:

Se você clicar no botão 'Calcular a Idade' sem informar uma data, será mostrada uma mensagem pedindo para você selecionar uma data.
Veja um exemplo na imagem abaixo:

<< Tutorial para Calcular o Número de Dias entre duas Datas
Tutorial para Criar uma Calculadora Padrão >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino