변경 입력란에 연령 표시

Question

생년월일 및 나이라는 두 개의 HTML 입력란이 있습니다.

연령을 계산하는 버튼이 있습니다. 이제 버튼을 누르지 않고이 나이를 계산하고 싶습니다. 생년월일 필드에 타이핑을 마친 나이가 자동으로 표시됩니다. JavaScript로 어떻게 할 수 있습니까?

<tr> 
<td>Birth Date</td> 
<td><input type="text" name="birth_date" id="datepicke" value="" maxlength="11" 
placeholder="birth date" /></td> 
</tr> 
<tr> 
<td>Age</td> 
<td> 
<button type="button" onclick="displayDate()">Display Difference</button> 
<p id="demo" style="vertical-align: top"> 

<input type="text" name="age" value="" maxlength="3" placeholder="age" /></td> 
</tr> 

<script> 
     function displayDate() 
     { 
      var dof = document.getElementById('datepicke').value; 
      var d1 = new Date(dof); //from date yyyy-MM-dd 
      var d2 = new Date(); //to date yyyy-MM-dd (taken currentdate) 
      var Months = d2.getMonth() - d1.getMonth(); 
      var Years = d2.getFullYear() - d1.getFullYear(); 
      var Days = d2.getDate() - d1.getDate(); 
      Months = (d2.getMonth() + 12 * d2.getFullYear()) - 
        (d1.getMonth() + 12 * d1.getFullYear()); 
      var MonthOverflow = 0; 
      if (Months - (Years * 12) < 0) 
       MonthOverFlow = -1; 
      else 
       MonthOverFlow = 1; 
      if (MonthOverFlow < 0) 
       Years = Years - 1; Months = Months - (Years * 12); 
      var LastDayOfMonth = new Date(d2.getFullYear(), 
        d2.getMonth() + 1, 0, 23, 59, 59); 
      LastDayOfMonth = LastDayOfMonth.getDate(); 
      if (MonthOverFlow < 0 && (d1.getDate() > d2.getDate())) { 
       Days = LastDayOfMonth + (d2.getDate() - d1.getDate()) - 1; 
      } 
      else 
       Days = d2.getDate() - d1.getDate(); 
      if (Days < 0) 
       Months = Months - 1; 
      var l = new Date(d2.getFullYear(), d2.getMonth(), 0); 
      var l1 = new Date(d1.getFullYear(), d1.getMonth() + 1, 0); 
      if (Days < 0) 
      { 
       if (l1 > l) 
        Days = l1.getDate() + Days; 
       else 
        Days = l.getDate() + Days; 
      } 
      document.getElementById("demo").innerHTML = Years + 
      " Year(s)"; 
      //, " + Months + " Month(s), " + Days + "Day(s 
     } 
</script> 

업데이트 :

<tr> 
<td>Birth Date</td> 
<td><input onblur="displayDate()" type="text" name="birth_date" id="datepicke" value="" 
maxlength="11" placeholder="birth date" /></td> 
</tr> 
<tr> 
<td>Age</td> 
<td><input type="text" name="age" id="age" value="" maxlength="3" placeholder="age" /></td> 
</tr> 

자바 스크립트 코드 :

<script> 
    function displayDate() 
    { 
     var dof = document.getElementById('datepicke').value; 
     var d1 = new Date(dof); //from date yyyy-MM-dd 
     var d2 = new Date(); //to date yyyy-MM-dd (taken currentdate) 
     var Months = d2.getMonth() - d1.getMonth(); 
     var Years = d2.getFullYear() - d1.getFullYear(); 
     var Days = d2.getDate() - d1.getDate(); 
     Months = (d2.getMonth() + 12 * d2.getFullYear()) - 
       (d1.getMonth() + 12 * d1.getFullYear()); 
     var MonthOverflow = 0; 
     if (Months - (Years * 12) < 0) 
      MonthOverFlow = -1; 
     else 
      MonthOverFlow = 1; 
     if (MonthOverFlow < 0) 
      Years = Years - 1; Months = Months - (Years * 12); 
     var LastDayOfMonth = new Date(d2.getFullYear(), 
       d2.getMonth() + 1, 0, 23, 59, 59); 
     LastDayOfMonth = LastDayOfMonth.getDate(); 
     if (MonthOverFlow < 0 && (d1.getDate() > d2.getDate())) { 
      Days = LastDayOfMonth + (d2.getDate() - d1.getDate()) - 1; 
     } 
     else 
      Days = d2.getDate() - d1.getDate(); 
     if (Days < 0) 
      Months = Months - 1; 
     var l = new Date(d2.getFullYear(), d2.getMonth(), 0); 
     var l1 = new Date(d1.getFullYear(), d1.getMonth() + 1, 0); 
     if (Days < 0) 
     { 
      if (l1 > l) 
       Days = l1.getDate() + Days; 
      else 
       Days = l.getDate() + Days; 
     } 
     document.getElementById("age").innerHTML = Years + 
     " Year(s)"; 
     //, " + Months + " Month(s), " + Days + "Day(s 
    } 
</script> 

Answer 1

사용

<input onchange="displayDate()" type="text" name="birth_date" id="datepicke" value="" maxlength="11" placeholder="birth date" /> 

Answer 2

당신은 입력에 onblur 이벤트를 추가 할 수 있습니다. 필드에서 클릭하면 발동됩니다. onchange을 사용하면 잘못된 날짜로 인해 오류가 발생할 수 있습니다.

<input onblur="displayDate()" type="text" name="birth_date" id="datepicke" value="" maxlength="11" placeholder="birth date" />