Thursday, 24 October 2013

Bind date textbox with datepicker and calculate age and display in textbox

Download jquery and css for datepicker from http://jqueryui.com/datepicker/

View Page
 =========Jquery functionfor datepicker==========
@Scripts.Render("~/bundles/Datepicker")
<link href="../../Scripts/Datepicker/jquery-ui.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
 var jqdatepicker = jQuery.noConflict();

    jqdatepicker(function () {
        jqdatepicker("#DOB").datepicker
            ({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'mm/dd/yy'
            });

    });

 function getAge(birthday) {

        if (birthday.value != '') {

            birthdayDate = new Date(birthday.value);
            dateNow = new Date();

            var years = dateNow.getFullYear() - birthdayDate.getFullYear();
            var months = dateNow.getMonth() - birthdayDate.getMonth();
            var days = dateNow.getDate() - birthdayDate.getDate();
            if (isNaN(years)) {

                document.getElementById('Age').value = '';
                document.getElementById('lblError').innerHTML = 'Input date is incorrect!';
                return false;

            }

            else {
                document.getElementById('lblError').innerHTML = '';

                if (months < 0 || (months == 0 && days < 0)) {

                    //alert(document.getElementById('Age'));
                    years = parseInt(years) - 1;
                    document.getElementById('Age').value = years + ' Years ' + months + ' Month'
                }
                else {
                    //alert(document.getElementById('Age').value);
                    document.getElementById('Age').value = years + ' Years ' + months + ' Month'
                }
            }
        }
    }
</script>
=========End=================
@using (Html.BeginForm("Add", "Employee", FormMethod.Post, new { id = "AddEmp" }))
{
            <div>
                DOB
            </div>
            <div>
                <input type="text" id="DOB" name="DOB" onblur="getAge(this)" />
                <div id="lblError">
                </div>
            </div>
}


No comments:

Post a Comment