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/>

Caio Cunha · Answer 1 · 2013-04-23T15:23:43.340

13

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:

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

And these JS files in the following order:

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

edited Apr 23 '13 at 15:23

answered Apr 23 '13 at 14:45

Caio Cunha

23,326
6
78
74

I have updated my question with my references, perhaps I'm messing something there. – Tomas Romero Apr 23 '13 at 16:58
I've copy/pasted your working example in my app but it's sillently failing, I must have some configuration wrong. – Tomas Romero Apr 23 '13 at 17:04
Have you checked network tab to see if all dependencies are loaded? Aren't you getting any 404? Why do you have `jquery-ui.js?body=1` and `jquery-ui-1.10.2.custom.min.js?body=1`? – Caio Cunha Apr 23 '13 at 17:16
All dependencies are being loaded, I'm not getting any 404. Perhaps that duplicate could cause some issue, I'm testing it tomorrow when I reach to the code! – Tomas Romero Apr 24 '13 at 02:07
Finally solved it! the problem was cause by the module.js reference, that is a js comes within common directory when you download angular-ui. I don't know when or why I added it, but now that I removed it, it works. Thanks for the help! – Tomas Romero Apr 24 '13 at 15:13

score 2 · Answer 2 · answered Apr 23 '13 at 17:06

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>

score 1 · Answer 3 · answered Nov 25 '15 at 16:47

include following JS in order

jquery.js
jquery-ui.js
angular-min.js

I added the following

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>

in html code

<body ng-app="myApp" ng-controller="myController">
// some other html code 
<input type="text" ng-model="date" mydatepicker />
<br/>
 {{ date }}
 //some other html code
 </body>

in the js , make sure you code for the directive first and after that add the code for controller , else it will cause issues.

date picker directive :

var app = angular.module('myApp',[]);
app.directive('mydatepicker', function () {
return {
    restrict: 'A',
    require: 'ngModel',
     link: function (scope, element, attrs, ngModelCtrl) {
        element.datepicker({
            dateFormat: 'DD, d  MM, yy',
            onSelect: function (date) {
                scope.date = date;
                scope.$apply();
            }
        });
    }
  };
});

directive code referred from above answers.

After this directive , write the controller

app.controller('myController',function($scope){
//controller code
};

Angular UI Datepicker not working

3 Answers3