10

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/>
Improve this question

3 Answers 3

Reset to default
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:

  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.
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I have updated my question with my references, perhaps I'm messing something there.
I've copy/pasted your working example in my app but it's sillently failing, I must have some configuration wrong.
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?
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!
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!
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>
Improve this answer

Comments

1

include following JS in order

  1. jquery.js
  2. jquery-ui.js
  3. 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
};
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.