AngularJS: min max jQueryUI datepicker directive

by manoj

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-date/0.0.8/date.js"></script>
<div ng-app="App">
<label>Birth Date</label>
 <div class='input-append'> 
<input type="text" ng-model="birthDate" ui-date-format="yy-mm-dd"  
ui-date="dateOptions" date-picker-link />
    <button type="button" class="btn btn-default date" data-toggle="datepicker"> <i class="icon-calendar"></i></button>
    </div>
    <div><div class="warning-message">must be a valid date</div></div>

<hr/>

<pre>birthDate = {{birthDate}}</pre>
    <label>Birth Date</label>
 <div class='input-append'> 
<input type="text" ng-model="birthDate1" vista-date-picker />
<button type="button" class="btn btn-default date" data-toggle="datepicker"> <i class="icon-calendar"></i></button>
         </div>
    <div><div class="warning-message">must be a valid date</div></div>
<hr/>

<pre>birthDate = {{birthDate1}}</pre>
</div>

SCSS

body{
    padding:20px;
    }
.proxied-field-wrap {
/*     position:relative;
    height:0;
    width:0;
    overflow:hidden;
    margin:0;
    padding:0;
    input {
        position:absolute;
        top:0;
        left:0;
        }
     */    }

JavaScript

angular
    .module('App',['ui.date'])
    .controller('myController',function($scope){
        $scope.birthDate = '2013-07-23';
        $scope.dateOptions = {
            minDate: 20,
            maxDate: "+1M +10D"
        };
    })
  .directive('datePickerLink', ['$filter',function ($filter) {
	
		return {
			restrict: 'EA',
			require:  'ngModel',
			scope: {
			},
			link: function (scope, element, attr, ctrl) {
				 
				var component = element.next();
				if (component.length) {
					component.on('click', function () {
						element.trigger('focus');
						//ctrl.$setViewValue(date);
					});
				}
            }
        }
  }])
    .directive('vistaDatePicker', ['$filter',function ($filter) {
	
		return {
			restrict: 'EA',
			require:  'ngModel',
			scope: {
			},
			link: function (scope, element, attr, ctrl) {
				$('.warning-message').hide();
				element.datepicker({
                    dateFormat: 'mm/dd/yy',
                    onSelect: function (date) {
                    ctrl.$setViewValue(date);
					element.parent('.input-append').next().children().hide();
                    }
                });
				var component = element.next()
				if (component.length) {
					component.on('click', function () {
						element.trigger('focus');
						//ctrl.$setViewValue(date);
					});
				}
				
				element.on('blur', function () {
				var reg = new RegExp(/^(((0[13578]|1[02])\/(0[1-9]|[12]\d|3[01])\/((19|[2-9]\d)\d{2}))|((0[13456789]|1[012])\/(0[1-9]|[12]\d|30)\/((19|[2-9]\d)\d{2}))|(02\/(0[1-9]|1\d|2[0-8])\/((19|[2-9]\d)\d{2}))|(02\/29\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g);
                   
				   var txt = element.val();
                     console.log(txt);
				   if(txt != "") {
					   if (reg.test(txt)) {
                            console.log('good');
						 element.parent('.input-append').next().children().hide();
					   } else...