AngularJS: angular-ui datepicker directive

by Anov Siradj

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.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>
<form name="myform">
    <label>
        Birth Date
        <span style="color:red" ng-show="myform.birthdate.$error.pattern">(1 Jan 2013)</span>
    </label>
    <input
        type="date"
        id="test"
        name="birthdate"
        ng-model="birthDate"
        popup="d MMM yyyy"
        options="dateOptions"
        opened="opened"
        custom-datepicker/>
</form>
<hr/>

<pre>
birthDate = {{birthDate}}
</pre>
    
<script type="text/ng-template" id="custom-datepicker.html">
    <div class="form-inline enhanced-datepicker">
        <label>
            <input
                type="text"
                id="{{id}}"
                name="{{name}}"
                ng-model="ngModel"
                datepicker-popup="{{popup}}"
                datepicker-options="{{options}}"
                date-disabled="{{dateDisabled}}"
                min="{{min}}"
                max="{{max}}"
                open="opened"
                ng-pattern="/^(?:[1-9]|1\d|2\d|3[0-1]) (?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec) (?:1|2)(?:\d{3})$/gim"/>
            <span class="btn"><i class="icon-calendar"></i></span>
        </label>
    </div>
</script>

SCSS

body{
    padding:20px;
    }
.enhanced-datepicker {
    position:relative;
    .btn {
        margin-right:5px;
        }
    input {
/*         position:absolute;
        top:0;
        left:-9999px;
         */        }
    }

JavaScript

angular
    .module('App',['ui.bootstrap'])
    .directive('customDatepicker',function($compile,$timeout){
        return {
            replace:true,
            templateUrl:'custom-datepicker.html',
            scope: {
                ngModel: '=',
                dateOptions: '@',
                dateDisabled: '@',
                opened: '=',
                min: '@',
                max: '@',
                popup: '@',
                options: '@',
                name: '@',
                id: '@'
            },
            link: function($scope, $element, $attrs, $controller){

            }    
        };
    })
    .controller('myController',function($scope){
        $scope.birthDate = '2013-07-23';
        $scope.dateOptions = {};
    });


angular.module("ui.bootstrap", ["ui.bootstrap.tpls", "ui.bootstrap.transition","ui.bootstrap.collapse","ui.bootstrap.accordion","ui.bootstrap.alert","ui.bootstrap.buttons","ui.bootstrap.carousel","ui.bootstrap.position","ui.bootstrap.datepicker","ui.bootstrap.dialog","ui.bootstrap.dropdownToggle","ui.bootstrap.modal","ui.bootstrap.pagination","ui.bootstrap.tooltip","ui.bootstrap.popover","ui.bootstrap.progressbar","ui.bootstrap.rating","ui.bootstrap.tabs","ui.bootstrap.timepicker","ui.bootstrap.typeahead"]);
angular.module("ui.bootstrap.tpls",...