Angular UI Datepicker not working

Question

I've followed steps described here Getting Angular UI to work and here How to integrate AngularUI to AngularJS?, but can't get the datepicker to pop-up.

Note that the fiddle refenrenced in both post in the accepted answer is not working.

Any suggestions? is this gadget working on the last versions of angular-ui?

Update: My resource imports

<link href="/assets/jquery-ui-1.10.2.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/angular-ui.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/project.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom.min.js?body=1" type="text/javascript"></script>
<script src="/assets/angular.min.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-ui.min.js?body=1" type="text/javascript"></script>
<script src="/assets/angular-resource.min.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/directives.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.hotkeys.js?body=1" type="text/javascript"></script>
<script src="/assets/module.js?body=1" type="text/javascript"></script>
<script src="/assets/underscore-min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

The module declaration:

angular.module('project', ['ngResource', 'ui.directives']);

The tag:

<input type="text" ng-model="date" ui-date/>

Answer 1

They are missing external references (404 on both JS and CSS). So it's probably due to missing references. Here is a working example.

Keep in mind that AngularUI mainly wraps jQueryUI plugins. So you need jQueryUI before AngularUI, and jQuery before jQueryUI. And Angular itself before AngularUI. Just make sure you have the following CSSs:

1. jQueryUI (http://jqueryui.com/)
2. AngularUI (http://angular-ui.github.io/)
3. Your app

And these JS files in the following order:

1. jQuery, so you can safely load jQuery UI Plugins (Datapicker)
2. jQueryUI, so you AngualrUI can make use of its plugin (Datepicker)
3. Angular, so AngularUI have access to the Angular framework
4. AngualrUI
5. Your module declaration, referring ui.directives module.

Answer 2

As a workaround, until I get angular UI to work in my project I made the following directive that works:

project.directive('datepicker', function() {

  return {
    restrict: 'E',
    transclude: true,
    scope: {
      date: '='
    },
    link: function(scope, element, attrs) {
      element.datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function(dateText, datepicker) {
          scope.date = dateText;
          scope.$apply();
        }
      });
    },
    template: '<input type="text" class="span2" ng-model="date"/>',
    replace: true
  }

});

and in the html:

<td><datepicker date="myDomainObj.startDate"></datepicker></td>
<td><datepicker date="myDomainObj.endDate"></datepicker></td>