jQuery UI datepicker with AngularJS in directive

I found that jQuery UI datepicker when putted in directive is better than Angular UI date picker because it requires less JavaScript code behind. Just add this once into some .js file and you can use it for all datepickers.

app.directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
                element.datepicker({
                    dateFormat:'dd/mm/yy',
                    onSelect:function (date) {
                        scope.$apply(function () {
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    }
});

After that just add "datepicker" attribute and it will work :)

<input datepicker="" id="Date" name="Date" type="textbox" />

Don’t forget to include the scripts in order:
1 – Jquery
2 – Jquery-ui
3 – angularjs.
Otherwise Angular will use JQlite intead of JQuery and the directive will break.

  http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs