JSFiddle - React, Tailwind, and code Playground

by xfabiomonteirox

HTML

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,600,700|Playfair+Display:400,700" rel="stylesheet">

<h3>Informações Pessoais</h3>

<hr>	

<form>
	
	<div class="form-group col-md-4">
		<label for="nome">Nome:</label>
		<input type="text" name="nome" id="nome" class="form-control text-uppercase" placeholder="Digite seu nome">
	</div>
	
		<div class="form-group col-md-2">
			<label for="data">Data de Nascimento:</label>
			<input type="date" name="data" id="data" class="form-control">
		</div>
	
	<div class="form-group col-md-1">
		<label for="idade">Idade:</label>
		<input type="num" name="idade" id="idade" class="form-control" placeholder="Idade" disabled>
	</div>
	
</form>

CSS

h3{
  font-family: 'Montserrat';
}

.form-group label{
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  display: block;
  padding: 6px 0;
  color: #333;
}

.form-group input{
  width: 200px;
  margin-bottom: 10px;
  color: #333;
  padding: 5px;
  border: 1px solid #999;
  outline: none;
}

JavaScript

document.getElementById("data").addEventListener('change', function() {
  var data = new Date(this.value);
  if(isDate_(this.value) && data.getFullYear() > 1900)
      document.getElementById("idade").value = calculateAge(this.value);
});

function calculateAge(dobString) {
  var dob = new Date(dobString);
  var currentDate = new Date();
  var currentYear = currentDate.getFullYear();
  var birthdayThisYear = new Date(currentYear, dob.getMonth(), dob.getDate());
  var age = currentYear - dob.getFullYear();
  if(birthdayThisYear > currentDate) {
    age--;
  }
  return age;
}

function calcular(data) {
  var data = document.form.nascimento.value;
  alert(data);
  var partes = data.split("/");
  var junta = partes[2]+"-"+partes[1]+"-"+partes[0];
  document.form.idade.value = (calculateAge(junta));
}

var isDate_ = function(input) {
        var status = false;
        if (!input || input.length <= 0) {
          status = false;
        } else {
          var result = new Date(input);
          if (result == 'Invalid Date') {
            status = false;
          } else {
            status = true;
          }
        }
        return status;
}