Age Calculation using AngularJS

Age Calculation using AngularJS

by santosh_patnala

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 <!--
    http://codepen.io/mitchmc/pen/pebIx
     custom radio buttons-->

<div class="container" data-ng-app="ageApp">
        <div class="row">
            <fieldset class="scheduler-border col-lg-6" ng-controller="ageController">
                <legend class="scheduler-border">DEF</legend>
                <form role="form">
                <div>
                    <h4>
                        Date Of Birth</h4>
                    <div class="form-group col-lg-4">
                        <label for="code">
                            Date <span class="mandateField">*</span></label>
                        <input type="text" class="form-control" data-ng-class="dobDateError ? 'errorBorder' : 'noErrorBorder'"
                            valid-number data-ng-model="dobDate" placeholder="dd" maxlength="2" data-ng-change="dobDateChange()"
                            data-ng-blur="dobDateBlur()" />
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="code">
                            Month <span class="mandateField">*</span></label>
                        <input type="text" class="form-control" data-ng-class="dobMonthError ? 'errorBorder' : 'noErrorBorder'"
                            valid-number data-ng-model="dobMonth" placeholder="mm" maxlength="2" data-ng-change="dobMonthChange()"
                            data-ng-blur="dobMonthBlur()" />
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="code">
                            Year <span class="mandateField">*</span></label>
                        <input type="text" class="form-control" data-ng-class="dobYearError ? 'errorBorder' : 'noErrorBorder'"
                            valid-number data-ng-model="dobYear" placeholder="yyyy" maxlength="4" data-ng-change="dobYearChange()"
          ...

CSS

fieldset.scheduler-border
{
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}

legend.scheduler-border
{
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
    width: auto;
    margin-bottom: 0;
    padding: 0 10px;
    border-bottom: none;
}

.radio label
{
    margin: 0 5px;
}
.mandateField
{
    color: #ff0000;
}
.errorBorder
{
    border: 1px solid #e47f7f;
    box-shadow: 0 1px 1px rgba(255, 0, 0, 0.075) inset;
}
.errorBorder:focus
{
    border-color: #e47f7f;
    box-shadow: 0 1px 1px rgba(255, 0, 0, 0.08) inset, 0 0 8px rgba(232, 102, 102, 0.6);
}
.noErrorBorder
{
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

JavaScript

var ageApp = angular.module("ageApp", []);   //factory myAgeFunctions end.

        ageApp.controller("ageController", ['$scope', function ($scope) {
            $scope.today = new Date(); //gets todays dd/mm/yyyy
            $scope.todayDate = new Date($scope.today).getDate(); //gets todays date
            $scope.todayMonth = new Date($scope.today).getMonth() + 1; //gets todays month
            $scope.todayYear = new Date($scope.today).getFullYear(); //gets todays year

            //A year will be a leap year if it is divisible by 4 but not by 100. If a year is divisible by 4 and by 100, it is not a leap year unless it is also divisible by 400.
            $scope.dobLeapYear = function () {
                if ((($scope.dobYear) % 4) == 0 && (($scope.dobYear) % 100) != 0) {
                    if ($scope.dobMonth == 2) {
                        if ($scope.dobDate > 29) {
                            $scope.dobDate = "";
                            $scope.dobDateError = true;
                        } else { $scope.dobDateError = false; }
                    }
                } else if ((($scope.dobYear) % 4) == 0 && (($scope.dobYear) % 100) == 0 && (($scope.dobYear) % 400 == 0)) {
                    if ($scope.dobMonth == 2) {
                        if ($scope.dobDate > 29) {
                            $scope.dobDate = "";
                            $scope.dobDateError = true;
                        } else { $scope.dobDateError = false; }
                    }
                } else {
                    if ($scope.dobMonth == 2) {
                        if ($scope.dobDate > 28) {
                            $scope.dobDate = "";
                            $scope.dobDateError = true;
                        } else { $scope.dobDateError = false; }
                    }
                }
            }

            $scope.todayLeapYear = function () {
                if ((($scope.todayYear) % 4) == 0 && (($scope.todayYear) % 100) != 0) {
                   ...