On change show age in input field

Question

I have 2 HTML fields called birth date and age.

There is a button to calculate an age. Now I want to calculate this age without pressing the button. It should automatically show the age when I finish typing in the Birth Date field. How can do this with 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>

Update:

<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> 

Javascript Code:

<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

You can add an onblur event to the input. This will fire when you click away from the field. If you use onchange , it will probably throw errors due to malformed dates.

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