AngularJS: min max jQueryUI datepicker directive

by Guddu Kumar

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">
    <form name="mainForm">
        <label>Birth Date</label>
        <div class='input-append'>
            <input type="text" ng-model="birthDate" name="birthDate" ui-date-format="yy-mm-dd" ui-date="dateOptions" date-picker-link valid-date />
            <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>

    </form>
</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', [ function () {

    return {
        restrict: 'A',
        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('validDate', [function () {

    return {
        restrict: 'EA',
        link: function (scope, element, attr, ctrl) { 
            ctrl.$validators.validDate = function (viewValue) {
                  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);
                console.log(viewValue);
                if (viewValue != "") { 
                      return reg.test(viewValue);
                 }
                 else
                 {
                      return true;
                 }
            }
        }
    }
}])

    .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();
              ...